prism-line-highlight.css 1.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
  1. pre[data-line] {
  2. position: relative;
  3. padding: 1em 0 1em 3em;
  4. }
  5. .line-highlight {
  6. position: absolute;
  7. left: 0;
  8. right: 0;
  9. padding: inherit 0;
  10. margin-top: 1em; /* Same as .prism’s padding-top */
  11. background: hsla(24, 20%, 50%,.08);
  12. background: -moz-linear-gradient(left, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0));
  13. background: -webkit-linear-gradient(left, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0));
  14. background: -o-linear-gradient(left, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0));
  15. background: linear-gradient(left, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0));
  16. pointer-events: none;
  17. line-height: inherit;
  18. white-space: pre;
  19. }
  20. .line-highlight:before,
  21. .line-highlight[data-end]:after {
  22. content: attr(data-start);
  23. position: absolute;
  24. top: .4em;
  25. left: .6em;
  26. min-width: 1em;
  27. padding: 0 .5em;
  28. background-color: hsla(24, 20%, 50%,.4);
  29. color: hsl(24, 20%, 95%);
  30. font: bold 65%/1.5 sans-serif;
  31. text-align: center;
  32. vertical-align: .3em;
  33. border-radius: 999px;
  34. text-shadow: none;
  35. box-shadow: 0 1px white;
  36. }
  37. .line-highlight[data-end]:after {
  38. content: attr(data-end);
  39. top: auto;
  40. bottom: .4em;
  41. }