CodePen Embed - Explore CSS initial-letter

Live

Live

Live

This Pen is owned by web.dev on CodePen.

See more by @web-dot-dev on CodePen

External CSS

https://codepen.io/web-dot-dev/pen/ZExZWBQ.css

External JavaScript

https://codepen.io/web-dot-dev/pen/ZExZWBQ.js

{"__browser":{"device":"unknown_device","mobile":false,"name":"unknown browser","platform":"unknown_platform","version":"0"},"__constants":{},"__CPDATA":{"domain_iframe":"https://cdpn.io","environment":"production","host":"codepen.io","iframe_allow":"accelerometer; ambient-light-sensor; camera; display-capture; encrypted-media; geolocation; gyroscope; microphone; midi; payment; vr; web-share","iframe_sandbox":"allow-forms allow-modals allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-top-navigation-by-user-activation allow-downloads allow-presentation"},"__graphql":{"data":{"data":null,"errors":[{"message":"Cannot return null for non-nullable field Query.sessionUser"}]},"url":"https://codepen.io/graphql","api":"cprails","cpedata":{"action":"show","controller":"embed"}},"__pay_stripe_public_key":"pk_live_2GndomDfiklqpSNQn8FrGuwZSMIMzha7DkLJqlYe7IR0ihKAlKdiHg68JJc5eVPt68rzAjzAAVXcUwjySHRCsgjQQ00gtRBUFNH","__pay_braintree_env":"production","__boomboom":{"serve_url":"https://cdpn.io/cpe/boomboom","store_url":"https://codepen.io/cpe/boomboom/store"},"__pageType":"embed","__item":"{\"editor_settings\":{\"auto_run\":true,\"autocomplete\":false,\"code_folding\":true,\"css_pre_processor\":\"none\",\"css_prefix\":\"neither\",\"css_starter\":\"neither\",\"emmet_active\":true,\"font_size\":14,\"font_type\":\"system\",\"format_on_save\":true,\"html_pre_processor\":\"none\",\"indent_with\":\"spaces\",\"js_pre_processor\":\"none\",\"key_bindings\":\"normal\",\"line_numbers\":true,\"line_wrapping\":true,\"match_brackets\":true,\"snippets\":{\"markupSnippets\":{},\"stylesheetSnippets\":{}},\"tab_size\":2,\"theme\":\"twilight\",\"id\":\"MWBErYp\",\"auto_save\":true},\"hashid\":\"MWBErYp\",\"itemType\":\"pen\",\"resources\":[{\"url\":\"https://codepen.io/web-dot-dev/pen/ZExZWBQ.css\",\"order\":0,\"resource_type\":\"css\",\"par_content\":\"\"},{\"url\":\"https://codepen.io/web-dot-dev/pen/ZExZWBQ.js\",\"order\":0,\"resource_type\":\"js\",\"par_content\":\"\"}],\"tags\":[],\"id\":65783300,\"user_id\":5928893,\"html\":\"<main>\\n  <p>Another lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit, deleniti saepe! Labore alias nemo quam perferendis harum ducimus at qui omnis magni amet eius, optio dolorum? Aliquid harum molestias voluptatibus.</p>\\n  <pre>\\n    <code></code>\\n  </pre>\\n  <div class=\\\"actions\\\">\\n    <label for=\\\"lines\\\">Lines</label>\\n    <input id=\\\"lines\\\" type=\\\"range\\\" min=\\\"1\\\" max=\\\"10\\\" step=\\\"0.1\\\" value=\\\"6\\\" />\\n    <label for=\\\"offset\\\">Offset</label>\\n    <input id=\\\"offset\\\" type=\\\"range\\\" min=\\\"1\\\" max=\\\"10\\\" step=\\\"1\\\" value=\\\"6\\\" />\\n  </div>\\n</main>\",\"css\":\"@import url(https://fonts.googleapis.com/css?family=Inter);\\n@import url(\\\"https://fonts.googleapis.com/css2?family=Merriweather:wght@700&display=swap\\\");\\n@import url(https://unpkg.com/open-props/open-props.min.css);\\n@import url(https://unpkg.com/open-props/normalize.min.css);\\n\\nbody {\\n  display: grid;\\n  place-items: center;\\n  min-height: 100vh;\\n  font-family: \\\"Inter\\\", sans-serif;\\n}\\n\\npre {\\n  font-weight: bold;\\n  background: var(--gray-8);\\n  padding: var(--size-4);\\n  display: grid;\\n  place-items: center;\\n  border-radius: var(--radius-2);\\n  color: var(--gray-0);\\n}\\n\\ninput {\\n  accent-color: var(--indigo-6);\\n}\\n\\ncode {\\n}\\n\\np {\\n  transition: all 0.2s;\\n}\\n\\np:first-of-type:first-letter {\\n  font-family: \\\"Merriweather\\\", serif;\\n  initial-letter: var(--initial, 2 2);\\n  -webkit-initial-letter: var(--initial, 2 2);\\n  font-weight: bold;\\n  margin-right: 1rem;\\n  color: var(--indigo-8);\\n  text-shadow: 0.25rem 0.25rem purple;\\n}\\n\\np {\\n  width: 50ch;\\n}\\n\\nmain {\\n  display: grid;\\n  gap: var(--size-4);\\n  place-items: center;\\n}\\n\\nlabel {\\n  font-weight: bold;\\n}\\n\\n.actions {\\n  display: inline-grid;\\n  grid-template-columns: auto auto;\\n  justify-content: center;\\n  gap: var(--size-2);\\n}\\n\",\"js\":\"const LINES = document.querySelector(\\\"#lines\\\");\\nconst OFFSET = document.querySelector(\\\"#offset\\\");\\nconst CODE = document.querySelector(\\\"code\\\");\\n\\nconst UPDATE = () => {\\n  document.documentElement.style.setProperty(\\n    \\\"--initial\\\",\\n    `${LINES.value} ${OFFSET.value}`\\n  );\\n\\n  CODE.innerHTML = `p:first-letter {\\n  initial-letter: ${LINES.value} ${OFFSET.value};\\n}\\n`;\\n};\\n\\nUPDATE();\\n\\nLINES.addEventListener(\\\"input\\\", UPDATE);\\nOFFSET.addEventListener(\\\"input\\\", UPDATE);\\n\",\"html_pre_processor\":\"none\",\"css_pre_processor\":\"none\",\"js_pre_processor\":\"none\",\"html_classes\":\"initial-letter-support\",\"css_starter\":\"neither\",\"js_library\":null,\"created_at\":\"2023-01-17T16:48:20.094Z\",\"updated_at\":\"2023-01-19T12:33:44.136Z\",\"title\":\"Explore CSS initial-letter\",\"description\":\"\",\"slug_hash\":\"MWBErYp\",\"head\":\"\",\"private\":false,\"has_animation\":false,\"team_id\":0,\"css_prefix\":\"neither\",\"template\":false,\"parent_id\":0,\"comments_count\":0,\"custom_screenshot_filename\":null,\"loves_count\":0,\"pick\":false,\"popularity_score\":0,\"views_count\":0,\"pick_visible_at\":null,\"cpid\":\"0185c0a1-b07e-7cff-aadc-02f6adfcdffc\",\"is_new_editor_pen\":false,\"pen_hash\":null}","__processorsMap":{"autoprefixer":"autoprefixer-10","babel":"babel-7","coffeescript":"coffeescript-2","format-1":"format-1","flutter":"flutter-1","haml":"haml-4","less":"less-3","lint-1":"lint-1","livescript":"livescript-1","markdown":"markdown-11","postcss":"postcss-7","pug":"pug-2","sass":"sass-1","scss":"sass-1","sass-ruby-3":"sass-ruby-3","sass-ruby-compass-3":"sass-ruby-compass-3","slim":"slim-3","stylus":"stylus-0","typescript":"typescript-4","vue":"vue-2","vue3":"vue-3"},"__favicon_mask_icon":"https://cpwebassets.codepen.io/assets/favicon/logo-pin-b4b4269c16397ad2f0f7a01bcdf513a1994f4c94b8af2f191c09eb0d601762b1.svg","__favicon_shortcut_icon":"https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico","__path_to_iframe_console_runner":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeConsoleRunner-6bce046e7128ddf9391ccf7acbecbf7ce0cbd7b6defbeb2e217a867f51485d25.js","__path_to_iframe_refresh_css":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeRefreshCSS-44fe83e49b63affec96918c9af88c0d80b209a862cf87ac46bc933074b8c557d.js","__path_to_iframe_runtime_errors":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeRuntimeErrors-4f205f2c14e769b448bcf477de2938c681660d5038bc464e3700256713ebe261.js","__path_to_processor_worker":"https://cpwebassets.codepen.io/assets/packs/router.js","__path_to_stop_execution_on_timeout":"https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js","__pen_normalize_css_url":"https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css","__pen_prefix_free_url":"https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js","__pen_reset_css_url":"https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"}