Перекрашивание <abbr>заголовка тега в Bootstrap 4 - PullRequest
Новая
       76

Перекрашивание <abbr>заголовка тега в Bootstrap 4

0 голосов
/ 24 января 2019

Я пытаюсь ввести название тега abbr в Bootstrap 4 . Но у меня проблемы, потому что я не могу найти, как переопределить bootstrap.css.

В настоящее время я делаю это, но подсказка не меняется: 

abbr[title]::after {
  /* content: " (" attr(title) ")"; */
  background-color: indigo;
  color: white;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

<p>
  Pre-mRNA comprises the bulk of <abbr title="heterogeneous nuclear RNA" class="text-info font-italic">hnRNA</abbr>.
</p>

Можно ли это исправить? Спасибо.

Ответы [ 2 ]

0 голосов
/ 24 января 2019

Этот ответ smugglerFlynn поможет с переопределением и научит вас значениям приоритета css.

https://stackoverflow.com/a/27704409/9996381

Идентификатор вашего тела тега с <body id="bs-override">

Запросите все, что у вас есть проблемы с переопределением с #bs-override selector

Также убедитесь, что ваш custom.css вызывается после всех других файлов .css.

0 голосов
/ 24 января 2019 

abbr:hover::after {
  content: attr(title);
  background-color: indigo;
  color: white;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

<p>
  Pre-mRNA comprises the bulk of <abbr title="heterogeneous nuclear RNA" class="text-info font-italic">hnRNA</abbr>.
</p>
...