如何独立于其父级更改 CSS 边框的宽度？ [复制]答案

【问题标题】：How to change the width of a CSS border independently from it's parent? [duplicate]如何独立于其父级更改 CSS 边框的宽度？ [复制]
【发布时间】：2021-12-06 22:26:58
【问题描述】：

我希望在div 上应用自定义边框。我希望该边框具有独立于div 宽度的长度/宽度（不确定我应该如何命名）。

我知道有人问过here 类似的问题，但没有不依赖添加一些额外 HTML 的新解决方案吗？

#foo {
    height: 100px;
    width: 100px;
    background-color: red;

    border-top: 10px solid blue;
}

&lt;div id="foo"&gt;&lt;/div&gt;

【问题讨论】：

您问题中的链接对我来说很有意义，答案对您没有帮助吗？ ::after 伪元素是一些 CSS，而不是额外的 HTML
伪元素不是“一些额外的 HTML”吗？只是我对添加额外的 HTML 元素来做样式的想法不太满意。但是，是的，这种方法确实有效，我想看看是否有任何新的更新方法可以实现这一点。
它们是额外的 HTML。浏览器将其显示在开发者选项卡“元素”上以与它们交互，但它们不是。
我明白了，感谢您的澄清，这样我就更愿意使用它们了。

标签： html css

【解决方案1】：

您可以尝试使用 ::before 和 ::after

#foo {
    height: 100px;
    width: 100px;
    background-color: red;
}

#foo::before {
  border-top: 5px solid blue;
  width: 80px;
  height: 5px;
  position: absolute;
  content: '';
  margin-left: calc((100px - 80px)/2);
  top: 3px;
}

&lt;div id="foo"&gt;&lt;/div&gt;

【讨论】：

我喜欢使用calc 的想法！它更接近我正在寻找的那种活力

【解决方案2】：

这样的事情应该可以解决问题:)

受您发布的链接上未接受的答案之一启发

#foo {
    position: relative;
    height: 100px;
    width: 100px;
    background-color: red;
}

#foo:after {
    content: "";
    position: absolute; 
    background-color: blue; 

    width: 80%; 
    left: 10%;

    height: 10px;
    top: -10px; 
}

&lt;div id="foo"&gt;&lt;/div&gt;

【讨论】：