2. display: block
Prev | Chapter 7. Display values supported for generated content | Next

## 2. display: block

Displays supported for :before and :after generated content:

- display: inline. Supported layouts:

  (The gray frame is used to show that generated content is inside the `p` block.)

  - list.

        p.bil {
            border: 1 solid gray;
            padding: 2;
        }

        p.bil:before,
        p.bil:after {
            display: inline;
            content: icon(right) "generated content" icon(left);
            color: navy;
        }

  - paragraph.

        p.bip {
            border: 1 solid gray;
            padding: 2;
        }

        p.bip:before,
        p.bip:after {
            display: inline;
            content: paragraph(content(icon(right), "generated content", icon(left)),
                               border-width, 1,
                               border-style, solid);
            color: navy;
        }

    Display: inline, content: paragraph is treated as a special case. The generated paragraph is added before/after normal content but inside the whole block. This contrasts with what is done for a generated paragraph with display: block.

  - division.

        p.bid {
            border: 1 solid gray;
            padding: 2;
        }

        p.bid:before,
        p.bid:after {
            display: inline;
            content: division(content(icon(down), "generated content", icon(up)),
                              border-width, 1,
                              border-style, solid);
            color: navy;
        }

    Display: inline, content: division is treated as a special case. The generated division is discarded as a container and all the ``paragraphs'' it contains are added before/after normal content but inside the whole block. This contrasts with what is done for a generated division with display: block.

  - rows, row or cell (all three give a table).

        p.bir {
            border: 1 solid gray;
            padding: 2;
        }

        p.bir:before,
        p.bir:after {
            display: inline;
            content: row(cell(icon(right)),
                         cell("generated content"),
                         cell(icon(left)),
                         border-width, 1,
                         border-style, solid);
            color: navy;
        }

- display: block. Supported layouts:

  (The gray frame is used to show that generated content is outside the `p` block.)

  - list.

        p.bbl {
            border: 1 solid gray;
            padding: 2;
        }

        p.bbl:before,
        p.bbl:after {
            display: block;
            content: icon(right) "generated content" icon(left);
            color: navy;
            margin-top: 1.33ex;
            margin-bottom: 1.33ex;
        }

  - paragraph.

        p.bbp {
            border: 1 solid gray;
            padding: 2;
        }

        p.bbp:before,
        p.bbp:after {
            display: block;
            content: paragraph(content(icon(right), "generated content", icon(left)),
                               border-width, 1,
                               border-style, solid);
            color: navy;
            margin-top: 1.33ex;
            margin-bottom: 1.33ex;
        }

    Note that border around generated paragraph is not drawn. It should have been drawn: this is a known deficiency of XXE styling engine. In order to draw this border, move border styles outside `paragraph()`, inside the rule itself.

  - division.

        p.bbd {
            border: 1 solid gray;
            padding: 2;
        }

        p.bbd:before,
        p.bbd:after {
            display: block;
            content: division(content(icon(down), "generated content", icon(up)),
                              border-width, 1,
                              border-style, solid);
            color: navy;
            margin-top: 1.33ex;
            margin-bottom: 1.33ex;
        }

    Note that border around generated division is not drawn. It should have been drawn: this is a known deficiency of XXE styling engine. In order to draw this border, move border styles outside `division()`, inside the rule itself.

  - rows, row or cell (all three give a table).

        p.bbr {
            border: 1 solid gray;
            padding: 2;
        }

        p.bbr:before,
        p.bbr:after {
            display: block;
            content: row(cell(icon(right)),
                         cell("generated content"),
                         cell(icon(left)),
                         border-width, 1,
                         border-style, solid);
            color: navy;
            margin-top: 1.33ex;
            margin-bottom: 1.33ex;
        }

- display: marker. Supported layouts:

  (The gray frame is used to show that generated content is outside the `p` block.)

  - list.

        p.bml {
            border: 1 solid gray;
            padding: 2;
            margin-left: 20ex;
            margin-right: 20ex;
        }

        p.bml:before,
        p.bml:after {
            display: marker;
            content: icon(right) "generated content" icon(left);
            color: navy;
        }

  - paragraph.

        p.bmp {
            border: 1 solid gray;
            padding: 2;
            margin-left: 20ex;
            margin-right: 20ex;
        }

        p.bmp:before,
        p.bmp:after {
            display: marker;
            content: paragraph(content(icon(right), "generated content", icon(left)),
                               border-width, 1,
                               border-style, solid);
            color: navy;
        }

  - division.

        p.bmd {
            border: 1 solid gray;
            padding: 2;
            margin-left: 20ex;
            margin-right: 20ex;
        }

        p.bmd:before,
        p.bmd:after {
            display: marker;
            content: division(content(icon(down), "generated content", icon(up)),
                              border-width, 1,
                              border-style, solid);
            color: navy;
        }

  - rows, row or cell (all three give a table).

        p.bmr {
            border: 1 solid gray;
            padding: 2;
            margin-left: 20ex;
            margin-right: 20ex;
        }

        p.bmr:before,
        p.bmr:after {
            display: marker;
            content: row(cell(icon(right)),
                         cell("generated content"),
                         cell(icon(left)),
                         border-width, 1,
                         border-style, solid);
            color: navy;
        }

- Other display values are ignored and processed like display: block.

Prev | Up | Next
1. display: inline | Home | 3. display: list-item