Question

这是我的例子：

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}

我放了一个边框，它的高度太高了。我想成为现在的一半。我该怎么做？

Answer 1

您不能设置边框的长度或高度，而是使用伪元素：

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>

边框始终具有放置边的高度或长度。

Answer 2

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>

如何控制边框的高度？

2 个答案: