CODEWITHSUNDEEP
htmlcss
Dipankar Das
Dipankar Das

Reputation: 131

CSS pseudo element ::before is not working properly

I want a structure like this

enter image description here

But i'm getting this

enter image description here

This is my html code

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

this is my 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;
}

Any help would be highly appreciated.

Upvotes: 0

Views: 113

Answers (2)

Hosein norouzi
Hosein norouzi

Reputation: 57

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/

Upvotes: 2

Shubham
Shubham

Reputation: 285

Have a look at this fiddle: https://jsfiddle.net/ash06229/c7mLuhaj/

.trial {
    position: relative;
    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;
    margin: 20px 0px 20px 40px;
}

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

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

Upvotes: 0

Related Questions