CSS: Set border to half width

Question

Consider following:

<div class="box">
...
</div>

.box{
    width:500px;
    border-bottom: 1px solid #ccc;
}

It will set the bottom border of full width of the box (500px). But instead of setting the border bottom to whole width, I'd like to set 300px, in the middle of the box bottom, how should I do that..

Answer 1

You can Use ::after or ::before pseudo-selectors. Like:

<div> something here </div>

CSS:

div {
    width: 500px;
    height: 100px;
    position: relative;
    padding-top: 20px;
    margin-top: 50px;
}

div::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    width: 50%;
    left: 25%;
    border-top: 1px solid red;
}

Here is the jsfiddle