CODEWITHSUNDEEP
css
user979331
user979331

Reputation: 11851

CSS add line after div

I have this div here

<div class="example"></div>

and here is the CSS

.example
{
border: 5px solid #000;
height: 200px;
width: 400px;
position: relative;
}

What I am trying to do is add line after this box that is touching the right side of the box in the middle, how would I accomplish this?

Upvotes: 9

Views: 31969

Answers (4)

Kamil Socha
Kamil Socha

Reputation: 299

There are multiple ways to do that. You could, for example add following css:

.example:after {
    content: '';
    position: absolute;
    top: 50px;
    left: 100%;
    border-top: 1px solid #000;
    width: 100px;
}

Upvotes: 0

Waxi
Waxi

Reputation: 1651

.example:after {
  content: '';
  width: 100px;
  height: 5px;
  background: black;
  display:inline-block;
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translate(0,-100%);}

Upvotes: 0

CodingKiwi
CodingKiwi

Reputation: 776

.example
{
border: 5px solid #000;
height: 200px;
width: 400px;
position: relative;
}

.example:after{
content:"";
position:absolute;
top:50%;
left:100%;
width:200px;
height:2px;
margin-top:-1px;
background:red;
}
<div class="example"></div>

Upvotes: 1

Banzay
Banzay

Reputation: 9470

You need to use ::after pseudo-element

.example {
  border: 5px solid #000;
  height: 200px;
  width: 400px;
  position: relative;
  box-sizing: border-box;
}
.example::after {
  content: " ";
  display: block;
  position: absolute;
  height: 5px;
  background: black;
  width: 40px;
  left: 100%;
  top: calc(50% - 2px);
}
<div class="example"></div>

Upvotes: 21

Related Questions