html - 从 div 左侧开始底部边框 20px

Question

<style>
.dt-product-line {
    padding-left: 20px;
    border-bottom-width: 2px;
    border-bottom-style: dashed;

}
</style>    

<div class="dt-product-line">This is my text</div>

我希望底线仅从文本出现到 div 的其余部分。这个 css 在整个 div 下划线，而文本缩进 20px。

我怎样才能让边框底线像文本一样从 20px 开始？

标签： htmlcss

Answer 1

您可以将文本包装在<span>标签和样式中，而不是

.dt-product-line {
  padding-left: 20px;
}

.underline {
  border-bottom-width: 2px;
  border-bottom-style: dashed;
}

<div class="dt-product-line"><span class="underline">This is my text</span></div>