Можно сделать содержимое <a href="">bla</a> пустым (просто пробел <a href=""></a>) с помощью CSS и иметь пустой объект, на который можно кликнуть? Если да, как я могу этого достичь? Спасибо

0
Jason Derrick 24 Окт 2019 в 01:31

3 ответа

Лучший ответ

Попробуй это

.link {
  display: block;
  width: 30px;
  height: 30px;
  background: #ccc;
  font-size: 0;
}
<a class="link" href="#">bla</a>
0
James 23 Окт 2019 в 22:40

Вы можете попробовать это.

    <!DOCTYPE html>
    <html>
      <head>
        <style>
          .try-to-hde { 
             display: none;
           }
           a.show-blan-space { 
             display: inline-block;
             background: blue;
             width: 50px;
             height: 50px;
           }
         </style>
        </head>
        <body>
          <a class="show-blan-space" href=""><span class="try-to-hde">bla</span></a>
         </body>
    </html>
0
mahadev kalyan srikanth 23 Окт 2019 в 22:55

Да. Не помещайте ничего между открывающим и закрывающим тегом привязки. Дайте тегу привязки имя класса. Затем, если вы укажете ему высоту и ширину, а также сделаете элемент display: block; или display: inline-block;, у вас будет пустое место, которое можно кликнуть. Вы также можете применить цвет фона или все, что душе угодно.

.blank-link {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  background-color: red; //if you desire a background-color
  }
<a href="#" class="blank-link"></a>

Изменение отображения на block или inline-block действительно важно, поскольку теги привязки по умолчанию имеют значение display: inline;. Когда он встроен, ваш рост и ширина ничего не будут делать.

edit После просмотра другого ответа я понимаю, что у вас есть текст, который вы хотите скрыть. font-size: 0 будет работать. Вы также можете использовать color: transparent; или даже opacity: 0;, если у вас нет цвета, который вы хотите видеть на фоне.

0
Brett Parsons 23 Окт 2019 в 23:07