How to break lines between links without them occupying the entire width of the parent element?

Question

I’ve been looking at these two topics that deal with line breaking between tags:

• Break lines in CSS without using extra elements
• How to break line between CSS tags

Both would solve my problem if it weren’t for a detail: I need the links <a> have the property display: inline-block so I can apply a scale in the :hover. Without this property the scale have no effect.

On the other hand, if I apply display: block links (or not specify any display), they will occupy the entire width of the div-father where they are, which is not desirable. I would like the link to be restricted only to the area of the text it contains, and not to the full width of the div-father.

Something like that:

I could just put one <br> after each link, but I know <br> semantically cannot be used to break lines between tags, only in text.

Is there any way to break these lines between tags <a> without them occupying the entire width of the div-father?

Answer 1

Da to do without the tag <p> using display:flex in the father and the guidance of the container-flex column and not row as in default

Take the example:

div{
  width: 200px;
  background: yellow;
  padding: 15px;
  display: flex;
  flex-direction: column; /* coloca os itens em coluna um abaixo do outro */
  align-items: flex-start; /* alinha os itens a esquerda para não ocuparem a linha inteira e apenas o próprio conteúdo */
}

a{
  background: aqua;
  -webkit-transition: -webkit-transform .1s ease;
  transition: transform .1s ease;
}

a:hover{
  display: inline-block;
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}

<div>
   <a href="">Link um</a>
   <a href="">Link dois</a>
</div>

Answer 2

I managed to include the tags <a> within tags <p> (since <a> contains only text), as mentioned in this HTML5 specification.

Like the tags <p> take up the entire length of the div-father, will force the line break. Just adjust the default margin that the <p> has to get the desired spacing:

<style>
p{
  margin: 5px 0;
}
</style>

Thus remaining:

p{
  margin: 5px 0;
}

div{
  width: 200px;
  background: yellow;
  padding: 15px;
}

a{
  background: aqua;
  -webkit-transition: -webkit-transform .1s ease;
  transition: transform .1s ease;
}

a:hover{
  display: inline-block;
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}

<div>
   <p><a href="">Link um</a></p>
   <p><a href="">Link dois</a></p>
</div>