<figure>
    <img src="https://www.w3cplus.com/sites/default/files/blogs/2016/1606/text-align-last-demo.jpg" alt=""  width="300" />
    <figcaption>W3cplus是一个致力于推广国内前端行业的技术博客。它以探索为己任,不断活跃在行业技术最前沿,努力提供高质量前端技术博文;其文章范围广泛,主要以CSS3、HTML5、Sass、Mobile和各类DEMO为主。</figcaption>
</figure>
<figure>
    <img src="https://www.w3cplus.com/sites/default/files/blogs/2016/1606/text-align-last-demo.jpg" alt=""  width="300" />
    <figcaption>W3cplus是一个致力于推广国内前端行业的技术博客。它以探索为己任,不断活跃在行业技术最前沿,努力提供高质量前端技术博文;其文章范围广泛,主要以CSS3、HTML5、Sass、Mobile和各类DEMO为主。</figcaption>
</figure>
html,
body {
  width: 100vw;
  height: 100vh;
  text-align: center;
}


figure {
  display: inline-block;
  margin: 15px;
  padding: 10px;
  border-radius: 5px;
  background-color: #eee;
  width: 300px;
  
  &:nth-child(1) figcaption {
    direction: ltr;
    text-align-last: end;
  }
  &:nth-child(2) figcaption {
    direction: rtl;
    text-align-last: end;
  }
}

figcaption {
  font-size: 12px;
  margin-top: 10px;
  line-height: 1.5;
  text-align: left;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.