Волнистая линия в текстовом поле с CSS как Google

Question

Как можно получить волнистую линию в текстовом поле во всех браузерах, например, в Google? Смотрите скриншот. Большое спасибо!

Answer 1

Google использует повторное изображение в кодировке base64 в качестве промежутка под входом. Вы можете напечатать материал в вашем диапазоне, и он появится под ним.

.error:hover {
    background: url(data:image/gif;base64,R0lGODlhCgAEAMIEAP9BGP6pl//Wy/7//P///////////////yH5BAEKAAQALAAAAAAKAAQAAAMROCOhK0oA0MIUMmTAZhsWBCYAOw==) repeat-x scroll 0 100% transparent;
    display: inline-block;
    padding-bottom: 1px;
 }

<span class="error">hello</span>

Отказ от ответственности: вам нужно навести курсор на промежуток, чтобы появился эффект.

Answer 2

Как упомянуто здесь;

С содержанием:

 .underline:after {
  content: '~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~';
  position: absolute;
  width: 100%;
  left:0;
  overflow: hidden;
  top:100%;
  margin-top: -.25em;
  letter-spacing:-.25em;
}

или с изображением:

.underline {
    display: inline-block;
    position:relative;
    background: url(http://i.imgur.com/HlfA2is.gif) bottom repeat-x;
}

Answer 3

Попробуйте использовать text-decoration а также text-decoration-skip-ink.

В text-decoration-skip-ink: none; может быть нарисован по всей длине текстового содержимого.

span {
  text-decoration: red wavy underline;
  text-decoration-skip-ink: none;
}

<span>asdsdfsf</span>