Рядки у CSS — тип string і лапки у значеннях властивостей

HTML

<div class="block">решта вмісту блока.</div>

CSS

.block::before {
    content: "css значення string — ";
    color: blue;
}

HTML

<h4 class="cap">1. Де рядки взагалі вживаються</h4>
<ul class="box">
    <li class="c1">до цього пункту дописано рядок через <code>content</code></li>
    <li>цитата з власними лапками: <q class="q">текст цитати</q>
        — їх задає <code>quotes</code></li>
    <li class="c2" data-vid="з атрибута">рядок склеєно з <code>attr()</code></li>
    <li class="c3">багатослівна назва шрифту — теж рядок</li>
</ul>

<h4 class="cap">2. Лапки, переноси й escape</h4>
<ul class="box">
    <li class="e1">одинарні всередині подвійних</li>
    <li class="e2">подвійні, екрановані косою рискою</li>
    <li class="e3">перенос через <code>\A</code> БЕЗ white-space — переносу немає</li>
    <li class="e4">той самий <code>\A</code> із <code>white-space: pre-wrap</code></li>
    <li class="e5">⚠️ escape поїдає пробіл після себе</li>
    <li class="e6">той самий код із двома пробілами — пробіл лишився</li>
    <li class="e7">довгий рядок, розбитий косою рискою в кінці — склеївся без пробілу</li>
</ul>

<h4 class="cap">3. Незакрита лапка з'їдає наступне правило</h4>
<div class="box">
    <p class="alive">Це правило написане ПЕРЕД поламаним — воно працює.</p>
    <p class="dead">А це правило написане ОДРАЗУ ПІСЛЯ нього. Воно мало бути
        зеленим і жирним, але лишилося звичайним: незакрита лапка проковтнула
        його разом із дужкою. Погляньте в кінець css цього прикладу.</p>
</div>

CSS

.c1::after {
    content: " ← ось цей рядок";
    color: #2f6fd0;
}

.q {
    quotes: "«" "»";
}

.c2::after {
    content: ": «" attr(data-vid) "»";
    color: #2f6fd0;
}

.c3 {
    font-family: Times New Roman, serif;
    font-size: 1.15em;
}

.e1::after {
    content: " → 'один \"два\" три' у подвійних лапках";
    color: #2f6fd0;
}

.e2::after {
    content: " → \"екранована лапка\"";
    color: #2f6fd0;
}

.e3::after {
    content: " → перший\A другий";
    color: #2f6fd0;
}

.e4::after {
    content: " → перший\A другий";
    white-space: pre-wrap;
    color: #29713a;
}

.e5::after {
    content: " → \2014 тире (пробілу після коду немає)";
    color: #b23a3a;
}

.e6::after {
    content: " → \2014  тире (два пробіли — один лишився)";
    color: #29713a;
}

.e7::after {
    content: " → перша половина\
друга половина";
    color: #2f6fd0;
}

.box {
    max-width: 580px;
    margin-bottom: 6px;
    padding: 10px 14px 10px 34px;
    border: 1px solid #b9c6d8;
    border-radius: 6px;
    background: #f6f9ff;
}

.box li {
    margin: 7px 0;
}

.box p {
    margin: 8px 0;
}

.alive {
    color: #29713a;
    font-weight: 700;
}

.cap {
    margin: 24px 0 8px;
    font-size: 1rem;
    color: #5a6472;
}

code {
    background: #eef4ff;
    border-radius: 3px;
    padding: 0 4px;
}

/* ⚠️ НАВМИСНА ПОМИЛКА: лапку не закрито, і закривальна дужка правила
   опинилася ВСЕРЕДИНІ рядка. Розбирач шукатиме дужку далі — і з'їсть
   наступне правило цілком. */
.poison::after { content: "тут забули закрити лапку; }

.dead {
    color: #29713a;
    font-weight: 700;
}

HTML

<div class="wrap"><p class="new">Будь-які рядки необхідно брати в подвійні або одинарні лапки. Якщо всередині рядка потрібно залишити одну або кілька лапок, то можна комбінувати типи лапок або додати перед лапками слеш.</p> </div>

CSS

.wrap{
  background-color: orange;
  text-align: center;
  font-size: 20px;
  padding: 20px;
}
.new:after { 
  content: " - Опис значення CSS string."; 
  color: blue;
  flex: 700;
  font-size: 22px;
}