css - :after node is not visible with text overflow ellipsis

Question

我试图显示一个指示器(橙色点)来表示列表项上发生了一个操作。我还使用 overflow: hidden; 和 text-overflow: ellipsis; 来处理文本溢出。

我面临的问题是，当发生文本溢出时，指示器不可见。

.root {
  width: 200px;
  border: 1px solid black;
}

ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

li {
  border-bottom: 1px solid gray;
  display: flex;
}

li .name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

li .name:after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  background: orange;
}

<div class="root">
  <ul>
    <li>
      <div class="name">
        This is one
      </div>
    </li>
    <li>
      <div class="name">
        This is one
      </div>
    </li>
    <li>
      <div class="name">
        This is one
      </div>
    </li>
    <li>
      <div class="name">
        This Long Long Long Long Text Is Here
      </div>
    </li>
  </ul>
</div>

码笔:https://codepen.io/anilnamde/pen/vmbzJa

Answer 1

为什么会这样

伪元素被视为 inline-block 内容，这意味着它直接位于文本之后。

你能做什么？

您可以强制显示伪元素，方法是使用 position: absolute; 将其从文档流中取出，并将其放置在 .name 容器的末尾。

需要进行以下更改:

• 添加 position: relative; 和 padding-right: 10px; 到 li .name，这将相对于它定位伪元素并提供一些喘息的空间
• 添加position: absolute;, right: 2px;, top: 0;, bottom: 0; 和 margin: auto; 将伪元素定位在 .name
的末尾

.root {
  width: 200px;
  border: 1px solid black;
}

ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

li {
  border-bottom: 1px solid gray;
  display: flex;
}

li .name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  padding-right: 10px;
}

li .name:after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  background: orange;
  position: absolute;
  right: 2px;
  top: 0;
  bottom: 0;
  margin: auto;
}

<div class="root">
  <ul>
    <li>
      <div class="name">
        This is one
      </div>
    </li>
    <li>
      <div class="name">
        This is one
      </div>
    </li>
    <li>
      <div class="name">
        This is one
      </div>
    </li>
    <li>
      <div class="name">
        This Long Long Long Long Text Is Here
      </div>
    </li>
  </ul>
</div>