Question

例如，HTML：

<div style="top:0;">January</div>
<div style="top:30px;">February</div>
<div style="top:60px;">March</div>

CSS：

div{
    position:absolute;
    border-bottom: 1px solid black;
}

我想在内容前后添加原始内容宽度的一半，以使每个div的宽度加倍。

效果如下所示，通过手动逐行插入内联块来解决： https://jsfiddle.net/vj25udLy/13/

如果我可以直接将宽度设置为其内容宽度的200％或其他比率，则该工作似乎更简单，更灵活。

如果没有纯CSS解决方案，则欢迎使用

JS / jQuery解决方案。

Answer 1

一种技巧是对内容使用数据属性，然后将其添加到两个伪元素中（现在您拥有2倍的内容），然后隐藏其中一个并使另一个居中：

.element {
 display:inline-block;
 margin:20px;
 border-bottom:1px solid;
}
.element:before,
.element:after {
  content:attr(data-text);
}
.element:before {
    visibility:hidden;
}
.element:after {
  display:inline-block;
  transform:translate(-50%);
}

<div class="element" data-text="January"></div>
<div class="element" data-text="February"></div>
<div class="element" data-text="March"></div>
<div class="element" data-text="aaaaaaaaaaaaaaaa"></div>
<div class="element" data-text="bb"></div>

如果您只是想获得边框，另一个想法是使用伪元素并将其宽度设为200％（或left:-50%和right:-50%）：

body {
  text-align:center;
}
.element {
 display:inline-block;
 margin:20px;
 position:relative;
}
.element:after {
  content:"";
  position:absolute;
  left:-50%;
  right:-50%;
  bottom:0;
  height:1px;
  background:#000;
}

<div class="element">January</div>
<br>
<div class="element">February</div>
<br>
<div class="element">March</div>
<br>
<div class="element">aaaaaaaaaaaaaaaa</div>
<br>
<div class="element">bb</div>

使div的宽度为其内容宽度的两倍

1 个答案: