Как удалить фон окна предупреждений на основе FontAwesome после нажатия кнопки закрытия?

Question

У меня на сайте есть несколько ящиков с предупреждениями. Мне нужно, чтобы фон на основе FontAwesome исчезал, когда кто-то нажимал кнопку закрытия в правом верхнем углу окна предупреждения.

Мое предупреждениеполе имеет следующий код:

<div id="system-message">
    <div class="alert alert-notice">
        <a class="close" data-dismiss="alert" aria-label="">×</a>
        <h4 class="alert-heading">Warning</h4>
            <div>
              <div>blah blah blah.</div>
            </div>
    </div>
<div>

И фрагмент кода, который создает фон, выглядит так:

div#system-message:before {
    position: absolute; top: 30px; right: 100px;
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    display: inline-block;
    text-decoration: inherit;
    font-size: 72px;
    line-height: 1;
    opacity: .1;
  content: "\f00c"; z-index: 1;}

Когда я закрываю окно предупреждения, фон Font-Awesome остается видимым! Как я могу предотвратить это? Вставить некоторые: после селектора в CSS? Но как?

Может ли какая-нибудь добрая душа помочь мне? Приветствия.

Answer 1

Большое спасибо, дорогой Джорджио. Проблема решена!

Answer 2

Это потому, что в вашем CSS фон прикреплен к #system-message, который является родительским элементом. Вы должны изменить свой код следующим образом:

div#system-message>alert:before {
    position: absolute; top: 30px; right: 100px;
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    display: inline-block;
    text-decoration: inherit;
    font-size: 72px;
    line-height: 1;
    opacity: .1;
  content: "\f00c"; z-index: 1;}

Если вы не хотите повторять фон для каждого предупреждения, вы можете добавить :first-child селектор.