将div的宽度设置为其内容宽度的两倍。

Question

将div的宽度设置为其内容宽度的两倍。

4

例如，HTML：

举个例子，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解决方案。

- Eric

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Temani Afif · Accepted Answer

一个技巧是使用数据属性来表示内容，然后将它添加到伪元素中（现在你有两倍的内容），然后隐藏其中一个，并将另一个居中显示：

.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>