画像なしで表現するリストマークのサンプルいろいろ

sample1

装飾文字を直接記述（全角のみ対応）

p {
    text-indent: -1em;
    margin-left: 1em;
}

sample2

装飾文字を直接記述（全角・半角どちらも対応）

p {
    text-indent: -1em;
    margin-left: 1em;
}
p span {
    display: inline-block;
    width: 1em;
    text-indent: 0;
}

sample3

装飾文字をCSSに記述（HTMLに記述しない）（全角のみ対応）

p {
    text-indent: -1em;
    margin-left: 1em;
}
p:before {
    content: '※';
}

sample4

装飾文字をCSSに記述（HTMLに記述しない）（全角・半角どちらも対応）

p {
    text-indent: -1em;
    margin-left: 1em;
}
p:before {
    content: '*';
    display: inline-block;
    width: 1em;
    text-indent: 0;
}

sample5

装飾文字を文字参照で記述

p {
    text-indent: -1em;
    margin-left: 1em;
}
p:before {
    content: '\00270c';
    display: inline-block;
    width: 1em;
    text-indent: 0;
}

sample6

装飾文字にウェブフォント（ここではFontAwesome）を使用

p {
    text-indent: -1em;
    margin-left: 1em;
}
p:before {
    content: '\0f0a1';
    display: inline-block;
    width: 1em;
    color: #00f;
    font-family: 'FontAwesome';
    text-indent: 0;
}

sample7

文字ではなくCSSプロパティを使用した装飾(1)

p {
    text-indent: -1em;
    margin-left: 1em;
}
p:before {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    margin-right: 4px;
    margin-left: 4px;
    border: transparent solid 5px;
    border-left-color: #f00;
    vertical-align: 4px;
}

sample8

文字ではなくCSSプロパティを使用した装飾(2)

p {
    text-indent: -1em;
    margin-left: 1em;
}
p:before {
    content: '';
    display: inline-block;
    width: .5em;
    height: .5em;
    margin-right: .5em;
    background: #f00;
    transform: rotate(45deg);
    vertical-align: 2px;
}

sample9

CSSのみで記号＋連番

p {
    text-indent: -2em;
    margin-left: 2em;
    counter-increment: calc-ex9;
}
p:before {
    content: '\203B'counter(calc-ex9);
    display: inline-block;
    width: 2em;
    text-indent: 0;
}

sample10

CSSのみで記号＋連番（アルファベット）

p {
    text-indent: -2em;
    margin-left: 2em;
    counter-increment: calc-ex10;
}
p:before {
    content: '['counter(calc-ex10, upper-latin)']';
    display: inline-block;
    width: 2em;
    text-indent: 0;
}

sample11

text-indentではなく、positionを使用してsample3と同じ表現

p {
    position: relative;
    margin-left: 1em;
}
p:before {
    content: '※';
    display: block;
    position: absolute;
    top: 0;
    left: -1em;
    width: 1em;
}

sample12

複数行の縦中央位置に文字を配置

p {
    position: relative;
    margin-left: 1.5em;
}
p:before {
    content: '※';
    display: block;
    position: absolute;
    top: 50%;
    left: -1.5em;
    width: 1em;
    margin-top: -.8em;
}

sample13

複数行の縦中央位置に文字以外を配置

p {
    position: relative;
    padding: 10px 10px 10px 2em;
}
p:after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    margin-top: -0.7em;
    left: 0;
    width: 1em;
    height: 1em;
    border-top: #ddd 3px solid;
    border-right: #ddd 3px solid;
    transform: rotate(45deg);
}