将多个伪元素组合成一个 HTML 标签答案

【问题标题】：Combine Multiple Pseudo Elements into one HTML tag将多个伪元素组合成一个 HTML 标签
【发布时间】：2016-06-20 08:00:17
【问题描述】：

我正在尝试为使用多个伪元素/类（例如 4 个或 5 个）的 ONE HTML 标签创建一个元素。这是我想要达到的最终结果，但我只想要一个 HTML 元素：

.main {
  position: relative;
  display: inline-block;
  padding: 5px;
  background-color: pink;
  border: 1px solid red;
}
.b1, .b2, .b3 {
  display: inline-block;
}
.down-arrow-border {
  position: absolute;
  bottom: -15px;
  left: 20px;
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 15px solid red;
}
.down-arrow {
  position: absolute;
  bottom: -14px;
  left: 21px;
  width: 0;
  height: 0;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-top: 14px solid pink;
}

<div class="main">
  <div class="b1">$</div>
  <div class="b2">234</div>
  <div class="b3">GBP</div>
  <div class="down-arrow-border"></div>
  <div class="down-arrow"></div>
</div>

Original Fiddle

这是我的尝试。我只能使用::before 和::after 伪元素。如何使用其他伪元素/类创建三角形元素？

.b2 {
  display: inline-block;
  padding: 5px;
  background-color: pink;
  border: 1px solid red;
}
.b2::before{
  content: '$';
}
.b2::after{
  content: ' GBP';
}

&lt;div class="b2"&gt;234&lt;/div&gt;

Attemped Fiddle

【问题讨论】：

寻求代码帮助的问题必须在问题本身中包含重现该问题所需的最短代码。虽然您提供了link to an example，但如果链接失效，您的问题对于未来遇到同样问题的其他 SO 用户将毫无价值。
目前任何元素都只有两个伪元素，你使用它们的方式不合适。
你可以看看这个寻求帮助：Speech bubble with arrow

标签： html css css-shapes pseudo-element

【解决方案1】：

由于您的原始元素（第一个小提琴）中有两个以上的元素，因此您无法仅使用一个元素来完成此操作（因为一个元素最多只能附加两个伪元素）。

您可以实现的最大减少是使用以下 sn-p 中的两个元素来做到这一点：

.main {
  position: relative;
  display: inline-block;
  padding: 5px;
  background-color: pink;
  border: 1px solid red;
}
.b2 {
  display: inline-block;
}
.b2::before {
  content: '$';
}
.b2::after {
  content: ' GBP';
}
.main::before {
  position: absolute;
  content: '';
  bottom: -15px;
  left: 20px;
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 15px solid red;
}
.main::after {
  position: absolute;
  content: '';
  bottom: -14px;
  left: 21px;
  width: 0;
  height: 0;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-top: 14px solid pink;
}

<div class="main">
  <div class="b2">234</div>
</div>

但是等等，这绝对不是推荐的解决方案。正如 Paulie_D 在他的 cmets 中提到的，您没有以适当的方式使用伪元素。通常应该使用伪元素来为元素添加额外的样式，而不是关键的内容（如货币代码、其符号等）。它们应该留给正在获取和发送金额值的后端程序。

所以我推荐的解决方案如下：

.b2 {
  position: relative;
  display: inline-block;
  padding: 5px;
  background-color: pink;
  border: 1px solid red;
}
.b2::before {
  position: absolute;
  content: '';
  bottom: -15px;
  left: 20px;
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 15px solid red;
}
.b2::after {
  position: absolute;
  content: '';
  bottom: -14px;
  left: 21px;
  width: 0;
  height: 0;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-top: 14px solid pink;
}

&lt;div class="b2"&gt;$234 GBP&lt;/div&gt;

如果您 100% 打算使用伪元素，我将给出以下方法，其中后端程序设置 data-curr-* 属性。但是，后端将金额设置为单个字符串会更容易。

.main {
  position: relative;
  display: inline-block;
  padding: 5px;
  background-color: pink;
  border: 1px solid red;
}
.b2 {
  display: inline-block;
}
.b2::before {
  content: attr(data-curr-symbol);
}
.b2::after {
  content: ' ' attr(data-curr-code);
}
.main::before {
  position: absolute;
  content: '';
  bottom: -15px;
  left: 20px;
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 15px solid red;
}
.main::after {
  position: absolute;
  content: '';
  bottom: -14px;
  left: 21px;
  width: 0;
  height: 0;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-top: 14px solid pink;
}

<div class="main">
  <div class="b2" data-curr-symbol="$" data-curr-code="GBP">234</div>
</div>

【讨论】：

感谢您的解释。