Question

是否可以在文本块的最后一个单词之后设置图标或其他内容？

我想在最后一个单词“nibh”后面设置一个图标。像一个更大的灰点。到目前为止，我尝试使用::after并使用不同的JS函数，但要么它会破坏我的文本内容，要么点在我的<div>/<p>之下而不是与句子内联。

.article-text:after {
  content: '';
  display: inline-block;
  width: 15px;
  height: 15px;
  -moz-border-radius: 7.5px;
  -webkit-border-radius: 7.5px;
  border-radius: 7.5px;
  background-color: #dadada;
  margin: 0px 10px 0px 7px;
}

<div class="article-text">
  <h3>Lorum ipsum</h3>

  <p>Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Donec sollicitudin molestie malesuada. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Proin eget tortor risus. Vestibulum ante ipsum primis in faucibus orci
    luctus et ultrices posuere cubilia </p>

  <p>Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Donec rutrum congue leo eget malesuada. Donec rutrum congue leo eget malesuada. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Lorem ipsum dolor sit amet,
    consectetur adipiscing elit. Sed porttitor lectus nibh.</p>

</div>

Answer 1

您需要将css选择器更改为.article-text p:last-child::after

由于

您正在使用article-text - 它将检查HTML元素article-text而不是类。使用.表示课程.article-text。
由于最后一个单词位于p标记中，div的after内容将显示在下一行。
使用:last-child，因为您有2个p代码，并希望仅针对上一个p代码显示

.article-text p:last-child::after {
  content: '.';
  display: inline-block;
  width: 15px;
  height: 15px;
  -moz-border-radius: 7.5px;
  -webkit-border-radius: 7.5px;
  border-radius: 7.5px;
  background-color: #dadada;
  margin: 0px 10px 0px 7px;
}

<div class="article-text">
  <h3>Lorum ipsum</h3>

  <p>Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Donec sollicitudin molestie malesuada. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Proin eget tortor risus. Vestibulum ante ipsum primis in faucibus orci
    luctus et ultrices posuere cubilia </p>

  <p>Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Donec rutrum congue leo eget malesuada. Donec rutrum congue leo eget malesuada. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Lorem ipsum dolor sit amet,
    consectetur adipiscing elit. Sed porttitor lectus nibh.</p>

</div>

Answer 2

检查，

.dot:after {
     content: '';
     display: inline-block;
     width: 15px;
     height: 15px;
     -moz-border-radius: 7.5px;
     -webkit-border-radius: 7.5px;
     border-radius: 7.5px;
     background-color: #dadada;
     margin: 0px 10px 0px 7px;
}

<div class="article-text">
<h3>Lorum ipsum</h3>

<p>Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Donec sollicitudin molestie malesuada. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Proin eget tortor risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia </p>

<p>Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Donec rutrum congue leo eget malesuada. Donec rutrum congue leo eget malesuada. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor lectus <span class="dot">nibh.</span></p>

</div>

如何在文本块的最后一个单词后面设置图标？

2 个答案: