Skip to content

Instantly share code, notes, and snippets.

@azusa-tomita

azusa-tomita/index.html

Created September 3, 2019 09:13
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save azusa-tomita/754b45594615b4b2fabb1ffdf52ff1cd to your computer and use it in GitHub Desktop.
Save azusa-tomita/754b45594615b4b2fabb1ffdf52ff1cd to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style id="jsbin-css">
* {
margin: 0;
padding: 0;
border: 0;
}
p{
position:relative;
border:1px solid red;
}
p::after {
content: "ん";
position: absolute;
top:0;
left:auto;
display: inline;
background: rgba(0,255,0,.5);
}
.t1{
display: block;
text-align:center;
}
.t2{
display: flex;
justify-content: center;
}
</style>
</head>
<body>
<h1>left/rightがautoの場合、justify-contentの値で描画される（ch/fxのみ）</h1>
<p class="t1">ああああああああああ</p>
<p class="t2">ああああああああああ</p>
<script id="jsbin-source-css" type="text/css">* {
margin: 0;
padding: 0;
border: 0;
}
p{
position:relative;
border:1px solid red;
}
p::after {
content: "ん";
position: absolute;
top:0;
left:auto;
display: inline;
background: rgba(0,255,0,.5);
}
.t1{
display: block;
text-align:center;
}
.t2{
display: flex;
justify-content: center;
}</script>
</body>
</html>
Raw
jsbin.vuqelow.css
* {
margin: 0;
padding: 0;
border: 0;
}
p{
position:relative;
border:1px solid red;
}
p::after {
content: "ん";
position: absolute;
top:0;
left:auto;
display: inline;
background: rgba(0,255,0,.5);
}
.t1{
display: block;
text-align:center;
}
.t2{
display: flex;
justify-content: center;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment