diff --git a/src/scss/skin-modern/components/_seekbarlabel.scss b/src/scss/skin-modern/components/_seekbarlabel.scss
index f76c8f1d7..bf551bc07 100644
--- a/src/scss/skin-modern/components/_seekbarlabel.scss
+++ b/src/scss/skin-modern/components/_seekbarlabel.scss
@@ -23,25 +23,23 @@
     @extend %center-on-left-edge;
   }
 
+  // bottom arrow from http://www.cssarrowplease.com/
+  .#{$prefix}-seekbar-label-caret {
+    border: solid transparent;
+    border-color: transparent;
+    border-top-color: $color-primary;
+    border-width: .5em;
+    height: 0;
+    margin-left: -1em;
+    pointer-events: none;
+    position: absolute;
+    top: 100%;
+    width: 0;
+  }
+
   .#{$prefix}-seekbar-label-inner {
     border-bottom: .2em solid $color-primary;
 
-    // bottom arrow from http://www.cssarrowplease.com/
-    &::after {
-      border: solid transparent;
-      border-color: transparent;
-      border-top-color: $color-primary;
-      border-width: .5em;
-      content: ' ';
-      height: 0;
-      left: 50%;
-      margin-left: -.5em;
-      pointer-events: none;
-      position: absolute;
-      top: 100%;
-      width: 0;
-    }
-
     > .#{$prefix}-container-wrapper {
       position: relative;
 
diff --git a/src/ts/components/seekbarlabel.ts b/src/ts/components/seekbarlabel.ts
index eefb26beb..4673810c0 100644
--- a/src/ts/components/seekbarlabel.ts
+++ b/src/ts/components/seekbarlabel.ts
@@ -36,6 +36,8 @@ export class SeekBarLabel extends Container<SeekBarLabelConfig> {
   private appliedMarkerCssClasses: string[] = [];
   private player: PlayerAPI;
   private uiManager: UIInstanceManager;
+  private readonly container: Container<ContainerConfig>;
+  private readonly caret: Label<LabelConfig>;
 
   constructor(config: SeekBarLabelConfig = {}) {
     super(config);
@@ -45,17 +47,22 @@ export class SeekBarLabel extends Container<SeekBarLabelConfig> {
     this.thumbnail = new Component({ cssClasses: ['seekbar-thumbnail'], role: 'img' });
     this.thumbnailImageLoader = new ImageLoader();
 
+    this.container = new Container({
+      components: [
+        this.thumbnail,
+        new Container({
+          components: [this.titleLabel, this.timeLabel],
+          cssClass: 'seekbar-label-metadata',
+        }),
+      ],
+      cssClass: 'seekbar-label-inner',
+    });
+
+    this.caret = new Label({ cssClasses: ['seekbar-label-caret'] });
+
     this.config = this.mergeConfig(config, {
       cssClass: 'ui-seekbar-label',
-      components: [new Container({
-        components: [
-          this.thumbnail,
-          new Container({
-            components: [this.titleLabel, this.timeLabel],
-            cssClass: 'seekbar-label-metadata',
-          })],
-        cssClass: 'seekbar-label-inner',
-      })],
+      components: [this.container, this.caret],
       hidden: true,
     }, this.config);
   }