Как добавить кнопку закрытия для оповещения журнала с помощью CSS?

Question

Я пытаюсь добавить эту кнопку закрытия в свое сообщение журнала предупреждений. Окончательное отображение должно быть примерно таким:

Я пробовал несколько решений, перечисленных в SO, но по какой-то причине я не могу переместить кнопку закрытия из alertify log сообщение. Переполнение для кнопки закрытия всегда скрыто, и я попытался поиграть с настройками CSS, но он не работает.

var fn = function() {
  alertify.log('How to add close button? <a href="" class="close-icon"></a>');
};

fn();

.close-icon
{
  position: absolute;
  top: -5px;
  right:-5px;
    display:block;
    box-sizing:border-box;
    width:20px;
    height:20px;
    border-width:3px;
    border-style: solid;
    border-color:black;
    border-radius:100%;
    background: -webkit-linear-gradient(-45deg, transparent 0%, transparent 46%, white 46%,  white 56%,transparent 56%, transparent 100%), -webkit-linear-gradient(45deg, transparent 0%, transparent 46%, white 46%,  white 56%,transparent 56%, transparent 100%);
    background-color:black;
    box-shadow:0px 0px 5px 2px rgba(0,0,0,0.5);
    transition: all 0.3s ease;
}

<link href="https://rawgit.com/alertifyjs/alertify.js/master/dist/css/alertify.css" rel="stylesheet"/>
<script src="https://rawgit.com/alertifyjs/alertify.js/master/dist/js/alertify.js"></script>
<button onclick="fn();">
    <span class="ui-button-text">Test</span>
</button>

Answer 1

Проблема в том, что содержимое переполняется из контейнера, и это содержимое скрыто. Простой способ исправить это с помощью:

.alertify-logs > div {
  overflow: visible;
}

var fn = function() {
  alertify.log('How to add close button? <a href="" class="close-icon"></a>');
};

fn();

.close-icon
{
  position: absolute;
  top: -5px;
  right:-5px;
    display:block;
    box-sizing:border-box;
    width:20px;
    height:20px;
    border-width:3px;
    border-style: solid;
    border-color:black;
    border-radius:100%;
    background: -webkit-linear-gradient(-45deg, transparent 0%, transparent 46%, white 46%,  white 56%,transparent 56%, transparent 100%), -webkit-linear-gradient(45deg, transparent 0%, transparent 46%, white 46%,  white 56%,transparent 56%, transparent 100%);
    background-color:black;
    box-shadow:0px 0px 5px 2px rgba(0,0,0,0.5);
    transition: all 0.3s ease;
}

.alertify-logs > div {
  overflow: visible;
}

<link href="https://rawgit.com/alertifyjs/alertify.js/master/dist/css/alertify.css" rel="stylesheet"/>
<script src="https://rawgit.com/alertifyjs/alertify.js/master/dist/js/alertify.js"></script>
<button onclick="fn();">
    <span class="ui-button-text">Test</span>
</button>