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

Question

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

我想在最后一个单词“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

因为

1. 您正在使用 article-text - 它将检查 HTML 元素 article-text 而不是类。使用.表示类.article-text。

2. 由于最后一个单词位于 p 标记中，因此 div 后面的内容将显示在下一行。

3. 使用 :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>