Неправильное отображение индикатора CSS Required

Я не уверен, что в CSS вызывает *отображение под текстовым полем, когда я добавляю класс tiny к div

<div class="editor-field tiny required-indicator">

Проверьте jsfiddle: https://jsfiddle.net/pfqqmmfn/

Если класс tiny удален, то *отображение после текстового поля как ожидалось. Я все еще изучаю CSS, поэтому любая помощь была бы отличной. Я знаю, что это должно быть что-то простое, но я не могу найти проблему.

Спасибо за любую помощь.

2 ответа

  1. Я обновил JSFiddle: https://jsfiddle.net/pfqqmmfn/2/

    Я изменил .required-indicator:after(маленькая звездочка) на это:

    .required-indicator:after
    {
        content: "*";
        display:block;
        font-weight: bold;
        color: Red;
        width:20px;
        height:20px;
        position:absolute;
        left:calc(100% + 10px);
        top:0;
    }
    

    И добавил position:relative;к вашему .tinyклассу.
    Положение относительно родителя (.tiny) позволяет мне использовать position: absolute on its: after псевдо-element (который ведет себя как его ребенок).

    У вас был псевдо-элемент asteriskposition:relative;, поэтому, давая этому элементу .tinyкласс, вы устанавливаете его ширину в 135px (с !важно тоже) таким образом останавливая маленькую звездочку от установки там.

  2. Если добавить это

    form div.tiny {
      width: 120px !important;
    }
    

    он перезаписывает встроенное правило, которое вызывает вашу проблему (делая контейнеры входного поля слишком узкими, чтобы позволить астерикам рядом с ним). Вы можете попробовать использовать различные настройки ширины.

    https://jsfiddle.net/zLoqy3py/