Question

我有一个div容器（bootstrap.min.css的东西）。 div有另一个名为divborder的类。 divborder的边界底部很长，我怎么能削减它？或者缩短它的长度？示例代码：

＆＃13;

.divborder {
  border-bottom: 6px solid #C6C4C5;
  /*what should i put here to shorten this border-bottom?*/
}

＆＃13;

<div class="container divborder">
  <div class="col-md-6">
    some img
  </div>
  <div class="col-md-6">
    some texts
  </div>
</div>

＆＃13;

Answer 1

您无法更改边框的实际长度。

您需要使用定位的伪元素。

＆＃13;

target_link_libraries(myApp Qt5::Widgets)

＆＃13;

div {
  width: 100px;
  height: 100px;
  background: rebeccapurple;
  margin: 1em auto;
  position: relative;
}

div::after {
  content: "";
  position: absolute;
  height: 10px;
  background: red;
  top: 100%;
  width: 50%;
  left: 50%;
  transform: translateX(-50%);
}

＆＃13;

Answer 2

您可以更改边框底部的长度，这在本博文中已经很好地描述了。 https://www.steckinsights.com/shorten-length-border-bottom-pure-css/

 .page-title:after {
    content: ""; /* This is necessary for the pseudo element to work. */ 
    display: block; /* This will put the pseudo element on its own line. */
    margin: 0 auto; /* This will center the border. */
    width: 50%; /* Change this to whatever width you want. */
    padding-top: 20px; /* This creates some space between the element and the border. */
    border-bottom: 1px solid black; /* This creates the border. Replace black with whatever color you want. */
}

如何缩短边框底部的长度？在html / css中

2 个答案: