CODEWITHSUNDEEP
htmlcss
Cristi
Cristi

Reputation: 227

How can I control the height of border?

This is my example:

https://jsfiddle.net/aww9vej4/

HTML:

<div>
    <p>In the current art market, competition plays such a crucial role that collectors rely on advisors to help them build their collections and acquire significant artworks. Advisors are the eyes and ears of their clients, closely monitoring and analyzing art market developments. Considering that only 5% of all transactions take place at auction houses worldwide, it is the task of the advisor to look beyond such a limited part of the market.Therefore, an art advisor is always aware of international gallery programs, visits museums, artist studios,and non-profit organizations worldwide, researching artists, movements, and new trends. All of this is to give collectors a decisive lead and a better understanding of their purchases, hopefully ahead of others.</p>
</div>

CSS:

div{background:red;}
p{border-left:5px solid blue}

I put a border, its height is too high. I want to be about half of what is now. How do I do this?

Upvotes: 0

Views: 41

Answers (2)

Jacob G
Jacob G

Reputation: 14152

You cannot set the length or height of a border, use a pseudo element instead:

div{background:red;}
p{position:relative;}
p:after{
  content:'';
  position:absolute;
  left:-5px;
  height:50%;
  width:5px;
  background:blue;
  top:25%;
  }
<div>
    <p>In the current art market, competition plays such a crucial role that collectors rely on advisors to help them build their collections and acquire significant artworks. Advisors are the eyes and ears of their clients, closely monitoring and analyzing art market developments. Considering that only 5% of all transactions take place at auction houses worldwide, it is the task of the advisor to look beyond such a limited part of the market.Therefore, an art advisor is always aware of international gallery programs, visits museums, artist studios,and non-profit organizations worldwide, researching artists, movements, and new trends. All of this is to give collectors a decisive lead and a better understanding of their purchases, hopefully ahead of others.</p>
</div>

Borders always have the height or length of the side they are placed on.

Upvotes: 2

Dmitriy
Dmitriy

Reputation: 4503

div{
    background:red;
}
p{
    position: relative;
    padding-left: 10px;
}
p:before{
    content: '';
    position: absolute; top: 50%; left: -5px;
    height: 50%;
    width: 5px;
    background: #00f;
    -webkit-transform: translate(0%,-50%);
    -ms-transform: translate(0%,-50%);
        transform: translate(0%,-50%);
}
<div>
    <p>In the current art market, competition plays such a crucial role that collectors rely on advisors to help them build their collections and acquire significant artworks. Advisors are the eyes and ears of their clients, closely monitoring and analyzing art market developments. Considering that only 5% of all transactions take place at auction houses worldwide, it is the task of the advisor to look beyond such a limited part of the market.Therefore, an art advisor is always aware of international gallery programs, visits museums, artist studios,and non-profit organizations worldwide, researching artists, movements, and new trends. All of this is to give collectors a decisive lead and a better understanding of their purchases, hopefully ahead of others.</p>
</div>

Upvotes: 0

Related Questions