1234567891011121314151617181920212223242526272829303132333435363738394041424344454647 |
- pre[data-line] {
- position: relative;
- padding: 1em 0 1em 3em;
- }
- .line-highlight {
- position: absolute;
- left: 0;
- right: 0;
- padding: inherit 0;
- margin-top: 1em; /* Same as .prism’s padding-top */
- background: hsla(24, 20%, 50%,.08);
- background: -moz-linear-gradient(left, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0));
- background: -webkit-linear-gradient(left, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0));
- background: -o-linear-gradient(left, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0));
- background: linear-gradient(left, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0));
-
- pointer-events: none;
-
- line-height: inherit;
- white-space: pre;
- }
- .line-highlight:before,
- .line-highlight[data-end]:after {
- content: attr(data-start);
- position: absolute;
- top: .4em;
- left: .6em;
- min-width: 1em;
- padding: 0 .5em;
- background-color: hsla(24, 20%, 50%,.4);
- color: hsl(24, 20%, 95%);
- font: bold 65%/1.5 sans-serif;
- text-align: center;
- vertical-align: .3em;
- border-radius: 999px;
- text-shadow: none;
- box-shadow: 0 1px white;
- }
-
- .line-highlight[data-end]:after {
- content: attr(data-end);
- top: auto;
- bottom: .4em;
- }
|