Question

我正在尝试为一个HTML标签创建一个使用多个伪元素/类（例如4或5）的元素。这是我想要实现的最终结果，但是我只想要一个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';
}

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

Attemped Fiddle

Answer 1

由于你的原文（第一个小提琴）中有两个以上的元素，你只能用一个元素完成这个（因为一个元素最多只能连接两个伪元素）。

您可以实现的最大减少是使用以下代码段中的两个元素执行此操作：

.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在他的评论中提到的那样，你没有以适当的方式使用伪元素。一般情况下，伪元素应该用于为元素添加额外的样式，而不是关键的内容（如货币代码，符号等）。它们应留给后端程序，该程序将获取并发送金额值。

所以我建议的 解决方案 如下：

.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;
}

<div class="b2">$234 GBP</div>

如果你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>

将多个伪元素合并为一个HTML标记

1 个答案: