Question

我想知道一种在文本右边显示一行的简单方法。但是，该行不应从文本的中间开始，而应从文本的底部开始，类似于在文本下划线但应排除文本。

Answer 1

试试这个。

hr {
    display: inline-block;
    width: 50%;
    position: relative;
    top: 0.5em;
    border: 0.7px solid lightgray;
}

<div>Choose blank <hr></div>

使用<hr>标签，我们可以实现您想要的。

Answer 2

是的，您可以使用<hr>标签作为水平线。

Answer 3

hr标记可用作底线。

.main {
    display: flex;
    justify-content: end;
    align-items: baseline;
}

hr {
    width: 100%;
    margin: 0;
}

<div class="main">
<p>SimpleText</p>
<hr> 
</div>

Answer 4

您尝试一下...

认为您想要的文字是“示例”

根据您的问题，我知道您需要在SAMPLE之后写一行

给标签加上p或h1之类的文本

然后做

 h1:after{
    content:"";
    give  backgrounf color,,,height,,width,,position compared to h1   etc also give text decoration :underline
}

Answer 5

最好的方法是语义方法，因为图像显示的像是到某个节的标题，因此我们可以使用section元素，其中包含header元素，然后使用{{1 }} 例如。然后使用h5将伪元素添加到h5并根据需要设置其样式，您应该避免使用:after，因为它用作内容之间的分隔符。您可以在下面找到我的方法：

hr

.header__text {
  display: grid;
  grid-template-columns: max-content auto;
}

.header__text:after {
  content: "";
  display: block;
  border-bottom: 1px solid lightgray;
  margin-left: 10px;
}

Answer 6

由于已经有了一个提供使用CSS网格的方法的答案，所以另一种方法也可以是结合使用CSS flexbox和伪元素。

label.title {
  display: flex;
  flex-direction: row;
}

label.title span {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
  /* or use flex shorthand: flex: 1 1 0; */
  white-space: nowrap;
}

label.title:after {
  content: '';
  width: 100%;
  border-bottom: 1px solid black;
  margin-left: 0.5em;
}

<label class="title">
    <span>Choose bank</span>
</label>

Answer 7

您的问题尚不清楚，但是根据您的示例，您可以简单地做到这一点。

.description
{
    border: 0;
    border-bottom: 1px solid #000;
}

<!DOCTYPE html>
<html>
<body>
  <p>Enter image description here <input type="text" class="description" /></p>
</body>
</html>

有没有一种简单的方法可以使用html / css在文本旁边显示一行

7 个答案: