定位之前和之后的CSS伪

Question

我有一个问题是可以在没有保留px的情况下将伪元素定位在这种风格中;

div:after {
    /*I want to be in the middle*/
    content: '';
    border-bottom: 2px solid red;
    width: 15%;
    position: absolute;
    left: 0;
}

div:before {
    content: '';
    border-bottom: 12px solid tomato;
    width: 7%;
    position: absolute;
    left: 0;
}

Answer 1

您需要父元素上的position relative和：100%远远相反的位置

＆＃13;

＆＃13;

div {
  position: relative;
  width: 320px;
  height: 100px;
  margin: 0 auto;
  background: black
}
   
div:after {
  content: '';
  position: absolute;
  top: 10px;
  width: 50px;
  height: 80px;
  left: 100%;
  /*left: calc( 100% - 10px );*/
  transform: translateX( -10px );
  background: green
}

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

like so？

使用translate(x,y) 由于@GCyrillus

修改了我的答案