The words Under construction in black text on a yellow background with diagonal black stipes surrounding it
I'm in the process of moving my site. It's still a work in progress. Please excuse the mess and broken links.

More Intense Glowing Border With CSS Grid

TODO: Pull subtitle into page object
This is a test

Debugging Stuff

I'm moving stuff around right now. All this below is helping me figure out where to put stuff

        -- title

More Intense Glowing Border With CSS Grid

-- html
-- show
-- title: Output
-- showtitle: HTML

<div id="glowWrapper">
  <div class="hGlow">This is a test</div>
  <div class="hGlow"></div>
  <div class="hGlow"></div>
  <div class="vGlow"></div>
  <div class="vGlow"></div>
  <div class="vGlow"></div>
</div>

-- css
-- show
-- title: CSS


#glowWrapper {
  display: grid;
  position: relative;
}

.hGlow, .vGlow {
  padding-left: 0.6rem;
  grid-row: 1;
  grid-column: 1;
}



.hGlow::before {
  background: white;
  box-shadow: 0px 0px 4px rgb(255,255,255);
  content: '';
  display: block;
  height: 1px;
  left: 0;
  position: absolute;
  top: 100%;
  width: 100%;
}

.hGlow::after {
  background: white;
  box-shadow: 0px 0px 4px rgb(255,255,255);
  content: '';
  display: block;
  height: 1px;
  left: 0;
  top: 0;
  position: absolute;
  width: 100%;
}

.vGlow::before {
  background: white;
  box-shadow: 0px 0px 4px rgb(255,255,255);
  content: '';
  display: block;
  left: 0;
  top: 0;
  position: absolute;
  height: 100%;
  width: 1px;
}

.vGlow::after{
  background: white;
  box-shadow: 0px 0px 4px rgb(255,255,255);
  content: '';
  display: block;
  width: 1px;
  left: 100%;
  top: 0;
  position: absolute;
  height: 100%;
}







-- categories
-- CSS
-- WebDev
-- Design
-- Snippets

-- metadata
-- date: 2023-08-20 23:22:16
-- id: 2uhewudv
-- site: aws
-- type: snippet 
-- status: published