html - 使用 CSS 在图像后添加空格和首字下沉

Question

我认为有一种方法可以使用 :after 伪元素来做到这一点，但我不太明白。

这是针对 CMS 的，我无法编辑 div class=entry-text 之间的内容标签。

我有一个 div进入其中一个<p>被插入，有时带有 <a><img /></a>在文本之前，但有时只是文本。

我希望该文本位于图像下方(如果存在)，并且我希望该文本具有首字下沉。

<div class="entry-text">
  <p>This is some text</p>
</div>

<div class="entry-text">
  <p><a href="#"><img src="myimage.jpg" class="entry-image" /></a>
  This is some text</p>
</div>

<style>
 div.entry-text > p::first-letter, div.entry-text > p > a::after::first-letter { 
     float: left;
     color: red;
     font-size: 300%;
     line-height: 30px;
     padding: 10px 5px 0 5px;
     content: "";
 }
 div.entry-text > p > a::after {
     margin-top: 15px;
     content: "";
 }
 </style>

Answer 1

::first-letter伪元素不适用于 inline 元素。它仅在父元素是 block 级元素时才有效。自 p是一个 block 级元素，当只有文本时它工作得很好。

如果文本之前有任何其他标记，例如 <a href>或者例如 <div> , ::first-letter不会针对第一个字母，请参阅 example我在说什么。

建议 1: 用 span 包裹文本, 这是一个内联元素并设置它的 display至 block .

div.entry-text > p > span::first-letter {
  color: red;
  font-size: 300%;
  line-height: 30px;
  padding: 0 0 0 0;
  content: "";
}
span {
  display: block;
}

<div class="entry-text">
  <p>
    <span>This is some text</span>
  </p>
</div>

<div class="entry-text">
  <p>
    <a href="#">
      <img src="myimage.jpg" class="entry-image" />
    </a>
    <span>
        This is some text
    </span>
  </p>
</div>

---

建议 2: 在 .entry-text 中与 img , 使用另一个 p标记文本。

div.entry-text > p::first-letter {
  color: red;
  font-size: 300%;
  line-height: 30px;
  padding: 10px 5px 0 5px;
  content: "";
}
div.entry-text > p > a::after {
  margin-top: 15px;
  content: "";
}
div.entry-text > p > a > img {
  position: relative;
}

<div class="entry-text">
  <p>This is some text</p>
</div>

<div class="entry-text">
  <p>
    <a href="#">
      <img src="myimage.jpg" class="entry-image" />
    </a>

    <p>
      This is some text
    </p>
  </p>
</div>

---

建议 3(不是最好的，但至少 ::first-letter 有效):将 <img>在文本之后使用 float:left;将其放在文本之前。

div.entry-text > p::first-letter { 
     color: red;
     font-size: 300%;
     line-height: 30px;
     padding: 10px 5px 0 5px;
     content: "";
 }
 div.entry-text > p > a::after {
     margin-top: 15px;
     content: "";
 }

div.entry-text > p > a > img {
  float:left; 
}

<div class="entry-text">
  <p>This is some text</p>
</div>

<div class="entry-text">
  <p>
    This is some text
    <a href="#">
      <img src="myimage.jpg" class="entry-image" />
    </a>
  </p>
</div>