2. display: block

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

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.


1. display: inline		3. display: list-item