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

Я пытаюсь стилизовать заголовок тега 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 ответа 

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>

Источник

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

/questions/17253880/kak-ya-mogu-pereopredelit-stili-css-bootstrap/17253894#17253894

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

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

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

Источник
Другие вопросы по тегам