Creating fancy Horizontal Rule lines

Share & showcase
2

Hi @FireIsGood, Thanks for this, I love customizing things like HR and Headings. I am adding some I came up with using a different method from this post Customised symbolic hr line that doesn’t use border but instead uses background. Two of them use windows fonts call Wingdings, not sure if Mac or Linux has them, the third one uses emoji.

I call this one Gothic Filigree

image
image1081×96 2.27 KB

/*
** Customised symbolic hr line in Preview modded from TriDiamond's post (https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/223)
*/
.markdown-source-view hr,
.markdown-preview-view hr {
  margin-block-start: 2em;
  margin-block-end: 2em;
  border: none;
  height: 1px;;
  background-image: linear-gradient(to right, var(--background-primary), tan, yellow, #e6d265, yellow, tan, var(--background-primary));
}
.markdown-source-view hr::before, 
.markdown-preview-view hr::before {
  content: '🙤x🙦'; /* '🙦 🙤' */
  color: #e6d265; /* #e6d265; */
  display: inline-block;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -55%);
  transform-origin: 50% 50%;
  padding: none;
  background-color: var(--background-primary);
}

I call this one Flower

image
image1049×87 3.07 KB

/*
** Customised symbolic hr line in Preview modded from TriDiamond's post (https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/223)
*/
.markdown-source-view hr,
.markdown-preview-view hr {
  margin-block-start: 2em;
  margin-block-end: 2em;
  border: none;
  height: 1px;;
  background-image: linear-gradient(to right, var(--background-primary), DarkOliveGreen, green, yellowgreen, yellowgreen, green, DarkOliveGreen,var(--background-primary));
}
.markdown-source-view hr::after, 
.markdown-preview-view hr::after {
  content: '🏶' ;/*'' */
  color: Tomato; /*lightcoral*/
  display: inline-block;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%); 
  transform-origin: 50% 50%;
  padding: none;
  background-color: var(--background-primary);
}
.markdown-source-view hr::before, 
.markdown-preview-view hr::before {
  content: '🙘🙤\00a0🙦🙚'; /* '🙦 🙤 🙐🙖 🙚 🙘' */
  color: DarkSeaGreen; 
  display: inline-block;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -55%);
  transform-origin: 50% 50%;
  padding: none;
  background-color: var(--background-primary);
}

Here is Flower using Emoji instead of fonts

image
image1084×108 3.63 KB

/*
** Customised symbolic hr line in Preview modded from TriDiamond's post (https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/223)
*/
.markdown-source-view hr,
.markdown-preview-view hr {
  margin-block-start: 2em;
  margin-block-end: 2em;
  border: none;
  height: 1px;
  background-image: linear-gradient(to right, var(--background-primary), DarkOliveGreen, green, yellowgreen, yellowgreen, green, DarkOliveGreen,var(--background-primary));
}
.markdown-source-view hr::after, 
.markdown-preview-view hr::after {
  content: '🌸';
  display: inline-block;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%); 
  transform-origin: 50% 50%;
  padding: none;
  background-color:transparent;
}

.markdown-source-view hr::before, 
.markdown-preview-view hr::before {
content: '🍀🍀';
display: inline-block;
position: absolute;
left: 50%;
transform: translate(-50%, -50%)rotate(160deg);
transform-origin: 50% 50%;
padding: none;
background-color: var(--background-primary);
}
9 Likes