使用 CSS 在图像后添加 space 和首字下沉

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 伪元素不适用于内联元素。它仅在父元素是块级元素时才有效。由于 p 是一个块级元素，所以当只有文本时它工作得很好。

如果文本前有任何其他标记，例如 <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>

使用 CSS 在图像后添加 space 和首字下沉

Use CSS to add space and a drop-cap after an image

html

css

pseudo-element