Question

我想在两个元素之间插入一个伪元素，例如：

.general {
  padding: 20px;
  border: 1px solid #4a4a4a;
}

.left-subtitle {
  float: left;
  padding-right: 5px;
  background-color: yellow;
}

.right-subtitle {
  float: right;
  padding-left: 5px;
  background-color: red;
  position: relative;
}

.right-subtitle:after {
  content: '';
  width: 100%;
  height: 2px;
  left: -100%;
  bottom: 0;
  background-color: blue;
  position: absolute;
}

<div class="general">
  <h3 class="title">Foo</h3>
  <div class="subtitle">
    <div class="left-subtitle">Text1</div>
    <div class="right-subtitle">9.00 €</div>
  </div>
</div>

如何获得蓝色的::after来获得完整的宽度并完全位于黄色和红色元素之间？我尝试使用display: flex;和justify-content: space-between;

.general {
  padding: 20px;
  border: 1px solid #4a4a4a;
}

.subtitle {
  display: flex;
  justify-content: space-between;
  position: relative;
}

.subtitle:after {
  content: '';
  width: 80%;
  left: 50%;
  transform: translateX(-50%);
  height: 2px;
  background-color: blue;
  position: absolute;
  bottom: 0;
}

.left-subtitle {
  padding-right: 5px;
  background-color: yellow;
}

.right-subtitle {
  padding-left: 5px;
  background-color: red;
}

<div class="general">
  <h3 class="title">Foo</h3>
  <div class="subtitle">
    <div class="left-subtitle">Text1 is longer, so doesn't work</div>
    <div class="right-subtitle">9.00 €</div>
  </div>
</div>

是否可以在不添加任何js文件的情况下实现这一目标？（我可以添加它们，但是最好不添加它们）

Answer 1

像这样使用flexbox：

    sentences
1   halaw kuy bashii
2   damawe bmrm
3   la malawa bum
4   la esh nustm
5   aw kabraya bash nya
6   awa mn bum chum bo lay
7   xaweki xosh basar bba la malawa

.general {
  padding: 20px;
  border: 1px solid #4a4a4a;
}

.subtitle {
  display: flex;
  justify-content: space-between;
}

.left-subtitle {
  padding-right: 5px;
  display: flex;
  flex: 1;
}

.right-subtitle {
  padding-left: 5px;
  position: relative;
}

.left-subtitle:after {
  content: '';
  flex: 1;
  border-bottom: 1px solid blue;
}

在两个元素之间添加伪元素

1 个答案: