html - 在 HTML 表单中 - 如何使用非文本颜色为文本添加下划线？

Question

我想在我的表格中有黑色文本，并用红色下划线。使用的问题 border-bottom: 1px solid red;是，它不仅强调了文本，还强调了我的输入按钮的整个长度。如果未激活，该按钮既没有边框也没有背景。因此它看起来很奇怪，如果这条线在每边重叠 5px 左右......

<form method="POST">
    <input type="hidden" name="cmd" value="doSthFancy" />
    <input type="hidden" name="item_id" value="${item.id}" />
    <input type="submit" value="${item.name} (${item.producer})" class="link" />
</form>

使用 div ( ) 嵌套<div class="redUnderline"><p class="blackText"> hello world! </p></div>通常有效，但似乎只是在表单之外。

我不能改用href。

谢谢你的帮助！

Answer 1

一个按钮和跨度怎么样？我试过这个：

<button style="padding: 20px;"><span style="border-bottom: dotted 1px red;">some text</span></button>

它似乎奏效了。红色虚线边框仅在文本下划线。

Answer 2

一个fake button呢？

演示

HTML

<form name="myform">
    <div id="fakeButton" onclick="myform.submit()">
        <span>Click Me</span>
    </div>
</form>

CSS

#fakeButton
{
    border-style:solid;
    border-width:1px;
    background-color:#808080;
    width:70px;
    text-align:center;
    padding:5px;

}
#fakeButton span
{
    color:black;
    border-bottom-style:solid;
    border-bottom-color:red;
    border-width:1px;
}