html - CSS 伪元素::之前无法正常工作

Question

我想要这样的结构

但是我明白了

这是我的html代码

<div class='trial'>Available for a 3 months</div>

这是我的CSS

.trial {
  font-size: 15px;
  font-weight: 600;
  padding: 2px 21px 2px 21px;
  color: #33c4b6;
  border: 1px solid #e4e4e4;
  display: inline-block;
  border-radius: 15px;
  background-color: white;
  /* position: relative; */
  /* bottom: -20px; */
  margin: 20px 0px 20px 0px;
}

.trial::before {
  content: "";
  border-bottom: 1px solid rgba(211, 211, 211, 0.54);
  width: 45%;
  display: inline-block;
  vertical-align: middle;
  margin-left: 10px;
}

如有任何帮助，我们将不胜感激。

Answer 1

Just a little change on your code.

.trial:before {
    content: "";
    border-bottom: 1px solid rgba(211, 211, 211, 0.54);
    width: 130%;
    display: inline-block;
    vertical-align: middle;
    position: absolute;
    left: -15%;
    top: 50%;
    z-index: -1 !important;
}

.trial {
    font-size: 15px;
    font-weight: 600;
    padding: 2px 21px 2px 21px;
    color: #33c4b6;
    border: 1px solid #e4e4e4;
    display: inline-block;
    border-radius: 15px;
    background-color: white;
    position: relative;
    margin: 20px 0px 20px 0px;  
}

check out this on https://jsfiddle.net/6xucrj9g/