Html 伪元素：after和溢出隐藏

label.required:after {
  content: ' *';
  color: red;
}

<label class="required">please enter your username</label>

label {
  display: inline-block;
  max-width: 150px;
}

label.required:after {
  content: ' *';
  color: red;
}

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

<label class="required ellipsis">please enter your username</label>

please enter your us... *

label {
  position: relative;
  display: inline-block;
  max-width: 150px;
}

label.required:after {
  content: '*';
  color: red;
  position: absolute;
  right: 0;
}

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

<label class="required ellipsis">please enter your username</label>

Html相关问答推荐

如何格式化HTML文本，使其环绕关键字

由于列中的图像，它们不会随FlexBox中的窗口大小进行调整

<；img>；和具有负边距的元素的堆叠顺序

通过动态div的对角线

附加点的列表样式

为什么不是所有字体好的图标都能与boostRapCDN一起使用呢？

摆动的html标签

如何影响 HTML 元素的哪些子元素导致其增长，哪些不增长？

如何从 div 内的属性中提取 href 和文本

为什么每当我调整图片大小时它都会使我的其他元素移动

如何截断一些文本并用双引号引起来？

我如何使用 CSS nth-child(odd) nth-child(even) 来对齐 CSS 网格中的列？

高度大于页面高度和页面大于覆盖的 CSS 覆盖

如何在div中设计伪元素？

CSS 中的 fingerprint scanner 动画

如何在Bootstrap卡片底部添加波浪形状

不同屏幕尺寸的显示问题

如何在单击按钮时切换 Blazor 中的类？

所有幻灯片上的 Quarto RevealJS 标题

如何阻止网格项目拉伸？