gallery

HTML

<dl> <dt class="option">Описание:</dt> <dd class="def">холст/масло</dd> <dt class="option">Размер:</dt> <dd class="def">28см x 40см</dd> <dt class="option">Год:</dt> <dd class="def">2017</dd> <dt class="option">Цена:</dt> <dd class="def">100500</dd> </dl>

CSS

 .option { font-family: 'verdana'; font-size: 1.4em; border-bottom: @orange 1px solid; } .def{ font-family: 'verdana'; font-size: 1.2em; margin-bottom: 15px; }
  • four
    wrap the text in a span and give it a border-bottom - L. Vadim

1 answer 1

If you need the underscore to be one if the description is more than one line, you can use float:

  dl,dt,dd{ padding:0; marfin:0; display:block; } .option { text-align:right; float:right; border-bottom:1px solid orange; } .def{ clear:both; text-align:right; margin-bottom:30px } 
 <dl> <dt class="option">Описание Описание Описание Описание Описание Описание Описание Описание Описание Описание:</dt> <dd class="def">холст/масло</dd> <dt class="option">Размер:</dt> <dd class="def">28см x 40см</dd> <dt class="option">Год:</dt> <dd class="def">2017</dd> <dt class="option">Цена:</dt> <dd class="def">100500</dd> </dl>

If not, you can use span:

  dl,dt,dd{ padding:0; marfin:0; display:block; } .option { text-align:right; } .option span{ border-bottom:1px solid orange; } .def{ text-align:right; margin-bottom:30px } 
 <dl> <dt class="option"><span>Описание Описание Описание Описание Описание Описание Описание Описание Описание Описание:</span></dt> <dd class="def">холст/масло</dd> <dt class="option"><span>Размер:</span></dt> <dd class="def">28см x 40см</dd> <dt class="option"><span>Год:</span></dt> <dd class="def">2017</dd> <dt class="option"><span>Цена:</span></dt> <dd class="def">100500</dd> </dl>