Skip to content

Commit 9883ac5

Browse files
committed
[css-text] extra visuals for example
1 parent 16a494b commit 9883ac5

2 files changed

Lines changed: 76 additions & 0 deletions

File tree

css-text-3/Overview.bs

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -134,6 +134,44 @@ spec:css-ruby-1; type:dfn; text:ruby
134134
.ls-ex .letter.ls2 { padding: 0 1em 0 1em; }
135135
.ls-ex .letter.first { padding-left: 0; }
136136
.ls-ex .letter.last { padding-right: 0; }
137+
.ls-ex .letter.ls2::after {
138+
margin-right: 1em;
139+
margin-left: 1em;
140+
left: 0;
141+
right: 0;
142+
top: 0;
143+
border-right: 1px solid black;
144+
border-left: 1px solid black;
145+
content: "";
146+
position: absolute;
147+
height: 5px;
148+
}
149+
.ls-ex .letter::after {
150+
left: 0;
151+
right: 0;
152+
top: 0;
153+
border-right: 1px solid black;
154+
border-left: 1px solid black;
155+
content: "";
156+
position: absolute;
157+
height: 5px;
158+
}
159+
.ls-ex .letter.ls1::after {
160+
margin-right: 0.5em;
161+
margin-left: 0.5em;
162+
}
163+
.ls-ex .letter.ls2::after {
164+
margin-right: 1em;
165+
margin-left: 1em;
166+
}
167+
.ls-ex .letter.last::after {
168+
border-right: none;
169+
margin-right: 0;
170+
}
171+
.ls-ex .letter.first::after {
172+
border-left: none;
173+
margin-left: 0;
174+
}
137175
</style>
138176

139177
<h2 id="intro">

css-text-4/Overview.bs

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -146,6 +146,44 @@ spec:selectors-4; type:dfn; text:selector
146146
.ls-ex .letter.ls2 { padding: 0 1em 0 1em; }
147147
.ls-ex .letter.first { padding-left: 0; }
148148
.ls-ex .letter.last { padding-right: 0; }
149+
.ls-ex .letter.ls2::after {
150+
margin-right: 1em;
151+
margin-left: 1em;
152+
left: 0;
153+
right: 0;
154+
top: 0;
155+
border-right: 1px solid black;
156+
border-left: 1px solid black;
157+
content: "";
158+
position: absolute;
159+
height: 5px;
160+
}
161+
.ls-ex .letter::after {
162+
left: 0;
163+
right: 0;
164+
top: 0;
165+
border-right: 1px solid black;
166+
border-left: 1px solid black;
167+
content: "";
168+
position: absolute;
169+
height: 5px;
170+
}
171+
.ls-ex .letter.ls1::after {
172+
margin-right: 0.5em;
173+
margin-left: 0.5em;
174+
}
175+
.ls-ex .letter.ls2::after {
176+
margin-right: 1em;
177+
margin-left: 1em;
178+
}
179+
.ls-ex .letter.last::after {
180+
border-right: none;
181+
margin-right: 0;
182+
}
183+
.ls-ex .letter.first::after {
184+
border-left: none;
185+
margin-left: 0;
186+
}
149187
</style>
150188

151189
<h2 id="intro">

0 commit comments

Comments
 (0)