after or before does not show image locally

You have several errors in the selectors.

The first is that in CSS you refer to an element with class .contenedorwhile in HTML the most similar element has class .contenedor2.

On the other hand, as you are putting it, you are indicating that it must act on an element with id=contactowithin an element with class=contenedor, and it should be an element that contains said id and class.

The selector should be both together: #contacto.contenedor2, with no spaces between them. In this way you are telling it that it is an element with said id and said class.

Correcting this, you would have the following form and it would work perfectly:

#contacto.contenedor2 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  text-align: center;
  font-size: 0.65em;
}

#contacto.contenedor2 .sede {
  border-bottom: 1px solid #48887b;
  margin-bottom: 5px;
  font-size: 1.5em;
}

/*elementos de cada sede*/

#contacto.contenedor2 .dir {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 5px;
  margin-bottom: 5px;
  text-align: left;
  align-items: end;
  justify-content: center;
}


/*datos de cada sede*/

#contacto.contenedor2 .dir h3 {
  grid-column-start: 2;
  grid-column-end: -1;
}

#contacto.contenedor2 .dir h3::before {
  content: url(http://ibemo.es/wp-content/uploads/2017/04/ubi-300x268.png);
  position: absolute;
}

#contacto.contenedor2 #maipu {
  padding: 10px 10px;
  grid-column-start: 1;
  grid-column-end: 5;
}

<div id="contacto" class="contenedor2">
  <div id="maipu">
    <h3 class="sede">MAIPÚ</h3>
    <div class="dir">
      <h3>Ozamis 309</h3>
    </div>
  </div>
</div>

Your problem is relative paths, and how they work.

On one side you have the label:

<img src="imagenes/ubicacion.png" alt="icono de ubicacion">

And on the other you have the CSS rule :

.contenedor #contacto #maipu .dir h3::before {
    background-image: url(imagenes/ubicacion.png);
    background-size: 20px 20px;
    display: inline-block;
    content: "";
    top: -5px;
    left: -25px;
    width: 20px;
    height: 20px;
    position: absolute;
}

We will start with the case of the label. Your image attribute srcuses the relative path imagenes/ubicacion.png, which means that the browser will locate the place where this path is called from (the location of your HTML file since the path is in a tag printed in it), it will look for an images folder and there inside it will look for the image called location.png .

The corresponding absolute path to this would be:

https://timondigital.com/tests/images/location.png

Path that is perfectly found by the browser.

Now let us review the second case. We start from where this CSS is located and call route imagenes/ubicacion.png. But here's the problem, your CSS file is not in the same directory as your HTML , so if the starting point of the path changes, shouldn't the relative path to reach the destination change as well?

The absolute path from your CSS looks like this:

https://timondigital.com/tests/css/images/location.png

And since this path does not exist in your directory system, it returns a 404 .

Solution:

What I would do is change your relative paths so that they start searching from the root and once there, the path you are interested in is already searched.

HTML

<img src="/pruebas/imagenes/ubicacion.png" alt="icono de ubicacion">

CSS

.contenedor #contacto #maipu .dir h3::before {
    background-image: url(/pruebas/imagenes/ubicacion.png);
    background-size: 20px 20px;
    display: inline-block;
    content: "";
    top: -5px;
    left: -25px;
    width: 20px;
    height: 20px;
    position: absolute;
}

That way you can use the same route regardless of where it is called from within your directory system.