如何用CSS实现文本旁的起始边框？是否需用伪元素？

完全不需要使用:before、:after伪元素，仅通过基础的border属性分方向配置就能实现图中的边框效果。

实现逻辑 #

图中效果的核心是四角保留黑色小边框，上下左右仅显示中间段边框，通过分方向设置不同宽度的边框即可实现：

• 给元素的上下边框设置较窄的宽度（比如1px），左右边框设置较宽的宽度（比如20px）；
• 所有边框统一设置为黑色，配合白色的元素背景，自然形成四角的黑色小L型边框，以及上下左右的中间段边框。

代码示例 #

以宽高200px的元素为例，代码如下：

.box {
  width: 200px;
  height: 200px;
  box-sizing: border-box; /* 确保宽高包含边框，避免尺寸偏移 */
  background-color: #ffffff; /* 白色背景，与边框形成对比 */
  /* 分方向设置边框：上下窄边框，左右宽边框 */
  border-top: 1px solid #000000;
  border-right: 20px solid #000000;
  border-bottom: 1px solid #000000;
  border-left: 20px solid #000000;
}

你可以根据实际需求调整边框的宽度数值，比如把左右边框的20px改成其他大小，来适配不同的设计要求。

内容的提问来源于stack exchange，提问作者Mix Power