Move underline in the middle of the word

Do not add the second line of "error" in the element, but in another pseudo element, like this:

.err {
  display: inline-block;
  position: relative;
  color: rgba(0,0,0,.5);
}

.err:after,
.err:before{
  content: '';
  width: 100%;
  z-index: 2;
  border-bottom: 2px dotted red;
  position: absolute;
  font-size: 16px;
  display: block;
  height: 4px;
  top: 50%;
  transform: translateY(-50%);
}

.err:before{
  left: 2px;
  top: calc(50% - 1px);
}

<div>hola
  <div class="err">mundo</div> informatico</div>

To place it in the middle, assign the top to 50% of the word and upload it a little with transform: translateY(-50%) .

For the second line, position it as you want using calc and left , example:

top: calc(50% - 1px);
left: 2px;

Was this what I needed? Place the word in low opacity, so that it would make better contrast, with black, the red lines are hardly seen.

I know you already have solutions using pseudo-elements, I'll give you a solution without using them. You can decorate the text directly so that it has a line over the text (with the value "line-through" for text-decoration-line ), and that line is wavy (with the value" wavy "for text-decoration-style ).

Here you can see it:

.err {
  display: inline-block;
  position: relative;
  z-index: 2;
  text-decoration-line: line-through;
  text-decoration-style: wavy;
  text-decoration-color: red;
}

<div>hola <div class="err">mundo</div> informatico</div>

But this solution has a couple of problems (at least for now):

• You can not control exactly what the wavy looks like (controlled by the browser)
• Your support is not very widespread (ie it will not look good in IE / Edge)

Just as you are using the pseudo-element after, you can use the pseudo-element before, you could even use calc () to give it a more appropriate location according to what you want to achieve.

.err {
  display: inline-block;
  position: relative;
  z-index: 2;
}

.err::before,
.err::after {
  content: '';
  width: 100%;
  border-top: 2px dotted red;
  position: absolute;
  font-size: 16px;
  top: 53%;
  left: -2px;
  display: block;
  height: 4px;
}

.err::before {
  left: 0;
  top: 47%;
}

<div>hola
  <div class="err">mundo</div> informatico</div>