stylizacja textu miedzy img a końcem a

pytanie zadane 8 czerwca 2020 w HTML i CSS przez auaauaaua Początkujący (370 p.)

<div><a href="#"><img src="#" alt="Odebrane" border="0">Odebrane</a></div>

Czy mogę jakoś się odnieść do słowa odebrane? Te drugie, pogrubione? Chcę mu ustawić inne vertical align niż obrazowi img.

3 odpowiedzi

odpowiedź 8 czerwca 2020 przez creend Gaduła (4,700 p.)

odpowiedź 9 czerwca 2020 przez VBService Ekspert (252,740 p.)
edycja 9 czerwca 2020 przez VBService

<div>
  <a href="#">
    <img src="#" alt="Odebrane">
      <strong>Odebrane</strong>
  </a>
</div>

<style>
div strong {
  padding-left: 10px;
  color: black;
  font-size: 16px;
}
div strong:hover {
  font-size: 18px;
}
div a {
  text-decoration: none;
}
</style>

<div>
  <a href="#">
    <img src="#" alt="Odebrane">
      <strong>Odebrane</strong>
  </a>
</div>

<style>
strong {
  padding-left: 10px;
  color: black;
  font-size: 16px;
}
strong:hover {
  font-size: 18px;
}
div a {
  text-decoration: none;
}
</style>

Znacznik <strong> jest jednym z pierwszych tag'ów w html, jest już dość rzadko stosowany, Moim zdaniem lepiej jest tu użyć znacznik <span>, który daje większe pole manewru przy użyciu go razem z css.


<div id="link_container">
  <a href="#">
    <img src="#" alt="Odebrane">
      <span>Odebrane</span>
  </a>
</div>

<style> 
#link_container span {
  padding-left: 10px;
  color: black;
  font-size: 16px;
  font-weight: bold; // odpowiednik <strong>
}
#link_container span:hover {
  font-size: 18px;
  color: white;
  background-color: black;
  padding-right: 10px;
}
#link_container a {
  text-decoration: none;
}
</style>

1	komentarz 9 czerwca 2020 przez spamator12 Nałogowiec (28,230 p.) tak, SPAN nie jest "blokowy".

odpowiedź 9 czerwca 2020 przez VBService Ekspert (252,740 p.)
edycja 9 czerwca 2020 przez VBService

CodePen - to jest przykład jednego z wielu rozwiązań, ponieważ css jest bardzo elastyczne, jedyne ograniczenie, można już tak praktycznie powiedzieć, to wyobraźnia programisty (projektanta).


<style>

#link_container {
  display: inline-block;
  
}
#link_container span { 
  margin: 0px;
  padding: 0px;
  color: black;
  font-size: 18px;
  font-weight: bold; // odpowiednik <strong>
  vertical-align: middle;
}
#link_container img {
  width: 20px;
  height: 20px;
  margin: 0px;
  padding: 0px;
  vertical-align: top;
}

#link_container a:hover span {
  letter-spacing: 1px;
  padding-right: 10px;
}
#link_container a:hover img {
  content: url(https://faviconer.net/preloaders/384/Spinning%20square.gif);
}

#link_container a {
  text-decoration: none;
}
</style>

</head>
<body>

<div id="link_container">
  <a href="#">
    <img src="https://faviconer.net/preloaders/384/Spinning%20square.jpg">
      <span>Odebrane</span>
  </a>
</div>