Как подчеркнуть поле в форме, кроме текста в ячейке

Question

Меня попросили создать форму с метками в ячейках (не подчеркнутых), за которыми следует подчеркнутая область, указывающая, куда кто-то должен помещать информацию. Мне лично не нравится такой подход к дизайну, но это то, что меня просили сделать.

Примерно так:

First Name: ________
Last Name: ________
Street Address: ________

Другими словами, все в ячейке таблицы подчеркнут , кроме метки и символа завершающего пробела.

Этикетки содержат различную информацию и явно не будут выравниваться. Однако все подчеркивания должны быть выровнены по правому краю в соответствующих ячейках.

Вот ручка, которая, надеюсь, иллюстрирует то, что я пытаюсь сделать. https://codepen.io/timmerbu/pen/pojMypE?editors=1100

html {
  font-size: 16px;
}

body {
  background: #9f9;
}

div {
  background: #fff;
  padding: 1rem;
  margin: auto;
  width: 200px;
}

table,
tr,
td {
  margin: 0;
  padding: 0;
  border-collapse: collapse;
}

table {
  width: 100%;
}

tr:nth-child(odd) {
  background: #fd4;
}

td {
  padding: 3px;
}

<div>
  <p>This is a test.</p>
  <table>
    <tbody>
      <tr>
        <td>Word: __________________</td>
      </tr>
      <tr>
        <td>Word word: ______________</td>
      </tr>
      <tr>
        <td>Word word word: _________</td>
      </tr>
      <tr>
        <td>Word word word word: ____</td>
      </tr>
    </tbody>
  </table>
  <p>End of test.</p>
</div>

Answer 1

Вы можете попробовать этот код

<p style="width: 250px; display: table;">
  <span style="display: table-cell; width: 80px;">First Name:</span>
  <span style="display: table-cell; border-bottom: 1px solid black;"></span>
</p>

Answer 2

просто используйте css после?

.underlined:after {
  content: '______________'
}

  <p class="underlined">First Name: </p>
  <p class="underlined">Last Name: </p>
  <p class="underlined">Street Address: </p>

Answer 3

Я думаю, что с подчеркнутым полем вы бы тоже хотели, чтобы пользователь вводил текст ... Я предлагаю следующее HTML

Вы можете использовать <span> <td> <p> или любой другой подходящий тег контейнера, я использую <div>

 <div>
   First Name:
   <input type="text" style="border: none; border-bottom: solid 1px black; width: 200px" />

 </div>

Вы также можете поместить стиль в CSS

---

ОБНОВЛЕНО

Справа выровняйте все подчеркивания

<table style="width: 300px">
    <tr>
      <td>
       <div style="width: 100%; float: left">
        <span style="background-color: white">First Name: </span>
        <hr style="margin-top: -4px;/>
       </div>
      </td>
    </tr>

    <tr>
      <td>
       <div style="width: 100%; float: left">
        <span style="background-color: white">Last Name: </span>
        <hr style="margin-top: -4px;/>
       </div>
      </td>
    </tr>

    <tr>
      <td>
       <div style="width: 100%; float: left">
        <span style="background-color: white">Age: </span>
        <hr style="margin-top: -4px;/>
       </div>
      </td>
    </tr>

    <tr>
      <td>
       <div style="width: 100%; float: left">
        <span style="background-color: white">Gender: </span>
        <hr style="margin-top: -4px;/>
       </div>
      </td>
    </tr>

    </table>

Answer 4

Немного неформально, но работает. Удаление подчеркивания и добавление его обратно с помощью псевдокласса CSS, при этом <span> для текста имеет фон и z-индекс, который помещает подчеркивание позади него. Вы можете изменить расположение подчеркивания, настроив top: -4px;.

html {
  font-size: 16px;
}

body {
  background: #9f9;
}

div {
  background: #fff;
  padding: 1rem;
  margin: auto;
  width: 200px;
}

table,
tr,
td {
  margin: 0;
  padding: 0;
  border-collapse: collapse;
}

table {
  width: 100%;
}

tr:nth-child(odd) {
  background: #fd4;
}

td {
  padding: 3px;
}

tbody td:after {
  border-bottom: 1px solid #f50909;
  content: "";
  width: 100%;
  height: 1px;
  display: block;
  position: relative;
  top: -4px;
}

td span {
  display: inline-block;
  position: relative;
  z-index: 2;
  padding-right: 5px;
  background: #FFF;
}

tr:nth-child(odd) span {
  background: #FD4;
}

<div>
  <p>This is a test.</p>
  <table>
    <tbody>
      <tr>
        <td><span>Word:</span></td>
      </tr>
      <tr>
        <td><span>Word word:</span></td>
      </tr>
      <tr>
        <td><span>Word word word:</span></td>
      </tr>
      <tr>
        <td><span>Word word word word:</span></td>
      </tr>
    </tbody>
  </table>
  <p>End of test.</p>
</div>